antd中Form的shouldUpdate

shouldUpdate

• Form 通过增量更新方式，只更新被修改的字段相关组件以达到性能优化目的。
• 大部分场景下，你只需要编写代码或者与 dependencies 属性配合校验即可。
• 而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 shouldUpdate 修改 Form.Item 的更新逻辑。
• 当 shouldUpdate 为 true 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助：

• 如果想根据form中的每一个字段的值来判断是否展示

  <Form
    form={form}
    layout="horizontal"
    labelCol={{ span: 6 }}
    wrapperCol={{ span: 16 }}
  >
    <Form.Item
      label="是否展示"
      name="show"
      rules={[{ required: true, message: '请选择是否展示' }]}
    >
      <Select placeholder="请选择是否展示">
        <Option value={0}>是</Option>
        <Option value={1}>否</Option>
      </Select>
    </Form.Item>
    <Form.Item labelCol={{ span: 0 }} wrapperCol={{ span: 24 }} shouldUpdate>
      {() => {
        const show = form.getFieldValue('show');
        return (
          <>
            {show === 1 && (
              <Form.Item
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                label="输入"
                name="aaa"
              >
                <Input />
              </Form.Item>
            )}
          </>
        );
      }}
    </Form.Item>
  </Form>