React 中的纯类组件和普通类组件有什么区别？

Question

我试图了解何时使用 React 纯组件以及何时使用 使用常规组件。 我有这个简单的问题。

给定相同的 props 和相同的状态，组件如何呈现不同的结果，有什么例子吗？

如何定义 props 对象的浅比较限制？ 我还没有在 props 中使用嵌套属性，但我应该始终使用纯组件吗？

下面的引用说，当父组件是纯组件时，所有子组件也不会重新渲染，假设我们理解并确保了这一点，但这是否也意味着我们必须将子组件包装在纯组件中，或者它们可以作为常规组件？

此外，React.PureComponent 的 shouldComponentUpdate() 会跳过整个组件子树的 prop 更新。确保所有子组件也是“纯”的。

最后一个...下面引用来自官方文档的内容意味着我们无法访问常规组件中的 shouldComponentUpdate() 吗？

React.Component 没有实现 shouldComponentUpdate()，但是 React.PureComponent 通过浅的 prop 和状态比较来实现它。

Answer 1

React 中有两种主要类型的组件。类组件和功能组件。

类组件是 ES6 类，功能组件是函数。

功能组件的唯一约束是接受 props 作为参数并返回有效的 JSX。

你可以随心所欲地使用功能组件。但是当你真的需要使用组件生命周期方法时，你需要将它重构为类级别的组件。

请看看这个link

Answer 2

组件如何在相同的 props 和相同的情况下呈现不同的结果 状态，有什么例子吗？

在给定相同的 props 和相同的状态（假设您不使用旧版上下文 API）的情况下，组件不会呈现不同的 Result。这就是你使用 PureComponent 的原因，因为给定相同的 Props 和相同的状态，组件不需要经历另一个渲染周期，它比较它的 props 和状态，然后最终决定不更改任何内容。这是对计算的浪费，因此使用 PureComponent，您可以通过在 Props 和 State 级别添加另一个比较来阻止这种比较的发生。

如何定义 props 对象的浅比较限制？我还没有 在道具中使用嵌套属性但我应该总是使用纯 组件？

如果你的 Props 是高度嵌套的，那么如果更新没有在数据中正确执行（对象没有被克隆和更改），那么浅比较可能会给你带来错误的否定。浅层比较将对 props 和 state 执行一级检查。

您必须决定是否使用PureComponent 的关键在于对是否使用的理解，经常发生您的组件渲染方法被触发但不需要进行更改的情况。如果 props 和 state 经常变化，并且只有在极小的情况下，组件才会使用相同的 props 和 state 渲染，那么你不需要使用 PureComponent，因为这会增加 props 和 state 比较的额外复杂性，它总是会返回 @987654322 @更改。

使用不可变数据将有助于快速进行浅层比较检查，因为引用更改意味着值更改，而不可变数据可确保您不会直接改变值。

这是否也意味着我们必须将子组件包装在纯组件中或 它们可以作为常规组件使用

在创建 PureComponent 时，您需要确保的只是确保其所有子组件也是 Pure，如果嵌套组件满足上述何时创建 PureComponent 的说明，那么您可以将它们编写为 PureComponent 本身。