Ant Design Form小记

大概三年前在使用 Ant Design 的 <Form> 时，产生了一些疑问，这里将解惑后的答案记录如下。

问：为什么

<Form.Item shouldUpdate>
  {form.getFieldValue('name')}
</Form.Item>

不会随表单值变化重新渲染以显示最新值，而

<Form.Item shouldUpdate>
  {({ getFieldValue }) => getFieldValue('name')}
</Form.Item>

可以？

答：出于性能考量，表单值变化不会使整个 <Form> 重新渲染，只有相关的 <Form.Item> 会单独重新渲染。form.getFieldValue('name') 是一个表达式，只会在创建 <Form.Item> 时计算它的值并传入 <Form.Item>。已经计算好的值不会更新，而渲染函数则允许 <Form.Item> 在重新渲染时调用，以获得最新的值。

问：<Form.Item> 是如何主动管理重新渲染的时机的呢？

答：<Form.Item> 底层用于管理更新的 Field 是类组件。类组件支持调用 this.forceUpdate() 主动重新渲染，Field 正是利用这个特性管理重新渲染的时机的。

参考资料

• https://github.com/ant-design/ant-design/blob/master/components/form/FormItem/index.tsx
• https://github.com/react-component/field-form/blob/master/src/Field.tsx