Giter Site home page Giter Site logo

Comments (5)

lemonied avatar lemonied commented on August 31, 2024 1

refresh会让子组件重建,什么情况下要让子组件重建?

目前是调用resetFields时,所有的Form.Item的子元素都会重建;
但我觉得只需要让受控的表单组件重建即可:配置了name并且子元素为非function

from field-form.

zombieJ avatar zombieJ commented on August 31, 2024

需要加一次强行刷新,但是销毁重建是需要的,因为会有副作用要考虑。一些自定义组件对受控变回 undefined 非受控处理逻辑是和 mount 就是 undefined 是不一样的

from field-form.

lemonied avatar lemonied commented on August 31, 2024

需要加一次强行刷新,但是销毁重建是需要的,因为会有副作用要考虑。一些自定义组件对受控变回 undefined 非受控处理逻辑是和 mount 就是 undefined 是不一样的

只有表单组件需要销毁重建来清除副作用吧?比如:

<Form.Item
  name="field"
  label="field"
>
  <Field />
</Form.Item>

而如果像这样的写法:

  1. 子元素是function的情况
<Form.Item
  noStyle
  shouldUpdate
>
  {() => {
    return (
      <Form.Item
        name="field"
        label="field"
        rules={[{ required: true, message: 'field is required' }]}
      >
        <Input />
      </Form.Item>
    );
  }}
</Form.Item>
<Form.List name="list">
  {(fields) => {
    return (
      <>
        {fields.map((field) => {
          return (
            <div key={field.key}>
              <Form.Item
                name={[field.name, 'field3']}
                label="field3"
                rules={[
                  { required: true, message: 'field3 is requried' },
                ]}
              >
                <Input />
              </Form.Item>
            </div>
          );
        })}
      </>
    );
  }}
</Form.List>
  1. Form.Item没有配置name,只作为样式存在
<Form.Item>
  <Button>提交</Button>
</Form.Item>

以上两种情况的子元素是非表单元素,因此不需要清除副作用;

这样改是否可行:

- this.refresh();

+ if (!this.props.name || typeof this.props.children === 'function') {
+   this.reRender();
+ } else {
+   this.refresh();
+ }

from field-form.

zingxy avatar zingxy commented on August 31, 2024

refresh会让子组件重建,什么情况下要让子组件重建?

from field-form.

zombieJ avatar zombieJ commented on August 31, 2024

嗯,精细化处理是最好的。但是很多业务写代码粒度比较粗,常见有来自 store 的混合数据会带有副作用。所以一把梭虽然不是最高效的,但是却是最干净的。

from field-form.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.