Question

Dan Abramov says

......如果保证在相同的道具和状态下返回相同的结果，则组件是纯粹的。

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

然后他说

纯粹的组件......不要依赖道具中的深层突变状态，因此它们的渲染性能可以通过浅层优化 shouldComponentUpdate()钩子
中的比较

但是这意味着我可以提供一个具有相同道具对象的纯组件，但是在所述道具对象内部的位置更深，并且该组件将呈现相同但不同（尽管有很大差异）道具。这意味着不会强制执行此约束。

声明一个组件extends PureComponent真的对ReactJS说了＃34;我知道我在做什么。我保证我使用的是不可变状态。因此，您只需要在shouldComponentUpdate＆＃34;？

中执行浅道具比较

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

Answer 1

声明一个组件作为扩展PureComponent真正说的 ReactJS“我知道我在做什么。我保证我使用的是不可变的州。所以你只需要执行浅道具比较 shouldComponentUpdate“？

是

最后，PureComponents提供了一个浅的shouldComponentUpdate方法默认情况下 - 大概这可以用你想要的任何东西来覆盖（甚至是深刻的比较）？

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

Answer 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 Component的示例。   和Hello Stateless Component。当您在父母中使用这两个   组件，只要父组件，您就会看到Hello将重新渲染   将重新渲染，但欢迎组件不会

也要使用Component的生命周期方法   那么我们必须使用Pure Components，因为无状态组件没有   生命周期方法。

Answer 3

请阅读有关Pure Render Checks的信息 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

纯ReactJS组件

3 个答案: