纯 ReactJS 组件答案

【问题标题】：Pure ReactJS Components纯 ReactJS 组件
【发布时间】：2017-08-15 12:59:20
【问题描述】：

丹·阿布拉莫夫says

...如果在给定相同的 props 和 state 的情况下保证返回相同的结果，则组件是纯的。

因此，如果为组件提供了相同的 props，则始终会返回相同的输出。这很清楚。

然后他说

纯组件...不要依赖于 props 或状态，因此它们的渲染性能可以通过浅层来优化比较他们的shouldComponentUpdate()钩子

但这意味着我可以为纯组件提供相同的 props 对象，但在所述 props 对象内部更深的地方有所不同，并且该组件将呈现相同但用于不同（尽管有很大差异）的 props。这意味着不强制执行此约束。

将组件声明为 extends PureComponent 真的是在对 ReactJS 说“我知道我在做什么。我保证我使用的是不可变状态。所以你只需要在 shouldComponentUpdate 中执行浅道具比较”？

最后，PureComponents 默认提供了一个浅的shouldComponentUpdate 方法——大概可以用任何你想要的方法覆盖它（甚至是深度比较）？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

将组件声明为 extends PureComponent 真的是说 ReactJS“我知道我在做什么。我保证我使用的是不可变的状态。所以你只需要在应该组件更新”？

是的

最后，PureComponents 提供了一个浅的 shouldComponentUpdate 方法默认情况下-大概可以用您想要的任何内容覆盖它（甚至是深度比较）？

您可以覆盖它。 React 会尝试warn you 不这样做。在这种情况下，最好从 Component instead 继承。

【讨论】：

【解决方案2】：

https://medium.com/groww-engineering/stateless-component-vs-pure-component-d2af88a1200b

class Welcome extends React.PureComponent {  
      render() {
        return <h1>Welcome</h1>
      }
    }

    Hello = () => {
      return <h1>Hello</h1>;
    }

所以上面有一个非常简单的 Welcome Pure 组件的例子和你好无状态组件。当您在父母中使用这两个时组件，您会看到 Hello 将在父组件时重新渲染将重新渲染，但欢迎组件不会

还有在你想使用组件生命周期方法的情况下那么我们必须使用纯组件，因为无状态组件没有生命周期方法。

【讨论】：

【解决方案3】：

请阅读纯渲染检查 https://github.com/vasanthk/react-bits/blob/master/gotchas/01.pure-render-checks.md

还有好文章：

https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02 https://flexport.engineering/optimizing-react-rendering-part-2-7b2e9a9ea21f https://flexport.engineering/ending-the-debate-on-inline-functions-in-react-8c03fabd144

【讨论】：