在
Form中使用子组件的过程中发现，每次resetFields都会导致子组件销毁重建，而子组件由于要请求接口加载数据，所以会导致重复请求。本文记录相关Issues的查找过程和和相关源码分析
文章目录
一、现象说明二、官方解释2.1 官方文档2.2 GitHub Issue 三、源码分析四、总结一、现象说明
如下代码所示，每次子组件FormChild都会打2次 log，分析发现是form.resetFields()导致子组件重新加载了，而form.setFieldsValue()则不会导致组件重新加载
import React from "react";import ReactDOM from "react-dom";import {Form } from "antd";import "antd/dist/antd.css";import "./index.css";ReactDOM.render(<div className="App"><FormDemo /></div>,document.getElementById("root"));function FormDemo() {const [form] = Form.useForm();React.useEffect(() => {form.resetFields();}, [form]);return (<Form form={form}><Form.Item name="someitem"><FormChild /></Form.Item></Form>);}function FormChild() {React.useEffect(() => {console.log("FormChild mounted");}, []);return <div>123</div>;}
点击下方按钮运行代码：
二、官方解释
2.1 官方文档
为什么
resetFields会重新 mount 组件？
resetFields会重置整个 Field，因而其子组件也会重新 mount 从而消除自定义组件可能存在的副作用（例如异步数据、状态等等）。
可以看出官方是知道这个问题的，而且这是经过考虑之后的设计方案，所以平时使用的时候需要注意，有些时候更适合 set 而不是 reset
https://ant.design/components/form-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-resetFields-%E4%BC%9A%E9%87%8D%E6%96%B0-mount-%E7%BB%84%E4%BB%B6%EF%BC%9F
2.2 GitHub Issue
① rc-field-form
resetFields会导致自定义组件销毁并重新加载 #106
/react-component/field-form/issues/106
② antd
form.resetFields() cause Form.Item.children re-mount #29423
/ant-design/ant-design/issues/29423
三、源码分析
antd中form的数据处理用了rc-field-form，看代码都是 19 年 06 月写的
① 对比resetFields和setFields方法可以看出notifyObservers的type是明显不同的地方；
② 找到观察者响应的代码区域，可以看出两个方法处理的区别，前者this.refresh()后者this.reRender()
③refresh函数有一个明显的标志计数器：resetCount
④ 找到计数器resetCount使用的区域，发现计数器会导致key的变化，也就导致了子组件的重新渲染，案情水落石出！
四、总结
经过上述分析，我们看出官方作者是针对这个场景专门做了处理，如果不做这个处理的话，可能在一些特殊场景存在遗留状态的问题，所以reset就直接把组件「打回原形」了。在使用的过程中知道这个特点后，注意一下就还好，不想重载组件就用set方法好了
