Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FormContext应当使用memorized值避免导致FormItem的额外无意义渲染 #21976

Closed
qiqiboy opened this issue Mar 7, 2020 · 1 comment
Closed
Labels

Comments

@qiqiboy
Copy link
Contributor

@qiqiboy qiqiboy commented Mar 7, 2020

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/ant-design/ant-design/blob/master/components/form/Form.tsx#L90-L109

Steps to reproduce

例如,ApplyReactPureComponent为使用了渲染优化的组件,但是由于FormContext传递的是一个局部内联对象值,导致所有FormItem随着Form上层组件的重新渲染而强制所有都被重新渲染。

<Form>
    <ApplyReactPureComponent >
        <FormItem name="username">
            <Input />
        </FormItem>
    </ApplyReactPureComponent >
</Form>

目前的实现方式:https://github.com/ant-design/ant-design/blob/master/components/form/Form.tsx#L90-L109

<FormContext.Provider
        value={{
          name,
          labelAlign,
          labelCol,
          wrapperCol,
          vertical: layout === 'vertical',
          colon,
        }}
      >
...
</FormContext>

What is expected?

FormContext传递一个memoized优化的值,避免FormItem被强制无意义的重新渲染。

const value = useMemo(
    () => ({
        name,
        labelAlign,
        labelCol,
        wrapperCol,
        vertical: layout === 'vertical',
        colon
    }),
    [labelAlign, labelCol, wrapperCol, layout, colon]
);

<FormContext.Provider
    value={value}
  >
...
</FormContext>

What is actually happening?

<Form />重新渲染时,<FormItem />即使在shouldComponentUpdate优化后的组件中也会被强制更新

Environment Info
antd 4.0.1
React 16.13.0
System macOS 10.15.3
Browser chrome 80.0

相关文档:https://reactjs.org/docs/context.html#caveats

@qiqiboy qiqiboy changed the title FormContxt应当使用memoried值避免导致FormItem的额外无意义渲染 FormContext应当使用memoried值避免导致FormItem的额外无意义渲染 Mar 7, 2020
@qiqiboy qiqiboy changed the title FormContext应当使用memoried值避免导致FormItem的额外无意义渲染 FormContext应当使用memorized值避免导致FormItem的额外无意义渲染 Mar 7, 2020
@zombieJ

This comment has been minimized.

Copy link
Member

@zombieJ zombieJ commented Mar 7, 2020

直接来个 PR 优化一下吧。 @qiqiboy

@zombieJ zombieJ added the improvement label Mar 7, 2020
qiqiboy pushed a commit to qiqiboy/ant-design that referenced this issue Mar 7, 2020
zombieJ pushed a commit that referenced this issue Mar 8, 2020
* perf(Form): FormContext  use a memorized value(#21976)

* fix #21976

* fix(Form): fix typo ‘useMemo’

Co-authored-by: qiqiboy <qiqiboy@tigerbrokers.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

2 participants
You can’t perform that action at this time.