我试图理解何时使用纯反应组件以及何时使用常规组件。我有一些简单的问题。
例如,在相同的道具和相同的状态下,组件如何呈现不同的结果?
如何界定道具对象浅层比较的界限?我没有在道具中使用嵌套属性,但是我应该总是使用纯组件吗?
下面的引文说,当父组件是纯组件时,所有子组件也不会重新渲染,比如说我们理解并确保了这一点,但这是否也意味着我们必须将子组件包装在纯组件中,或者它们与常规组件一样好?
此外,反应。PureComponent的shouldComponentUpdate()跳过整个组件子树的道具更新。确保所有子组件也是“纯”的。
最后一个是。。。以下引用自官方文档,这意味着我们无法访问常规组件中的shouldComponentUpdate()?
做出反应。Component不实现应该的ComponentUpdate(),而是React。PureComponent通过浅层道具和状态比较来实现它。
React中有两种主要类型的成分。类组件和功能组件。
类组件是ES6类,函数组件是函数。
功能组件的唯一约束是接受props作为参数并返回有效的JSX。
您可以随意使用功能组件。但是,当您确实需要使用组件生命周期方法时,您需要将其重构为类级组件。
请看看这个链接
例如,在相同的道具和相同的状态下,组件如何呈现不同的结果?
给定相同的道具和相同的状态(给定您不使用遗留上下文API),组件不会呈现不同的结果。这就是使用PureComponent的原因,因为给定相同的道具和相同的状态,组件不需要经历另一个渲染周期,在这个渲染周期中比较道具和状态,然后最终决定不更改任何内容。这是对计算的浪费,因此使用PureComponent,您可以通过在Props和State级别添加另一个比较来阻止这种比较的发生。
如何界定道具对象浅层比较的界限?我没有在道具中使用嵌套属性,但是我应该总是使用纯组件吗?
如果你的道具是高度嵌套的,那么如果数据中的更新没有正确执行(对象没有被克隆和更改),浅层比较可能会给你带来错误的否定。浅层比较将对道具和状态执行一级检查。
您必须决定是否使用PureComponent
,这一点来自于对是否触发组件渲染方法的理解,因此经常会触发组件渲染方法,但无需进行任何更改。如果道具和状态经常更改,并且只有在非常小的情况下组件才会使用相同的道具和状态进行渲染,那么您不需要使用PureComponent,因为这将增加道具和状态比较的额外复杂性,对于更改,它将始终返回true
。
使用不可变数据将有助于快速进行浅层比较检查,因为引用更改意味着值更改,而不可变数据确保不会直接更改值。
这是否也意味着我们必须将child封装在纯组件中,或者它们可以作为常规组件使用
创建PureComponent时,您需要确保其所有子组件都是纯的,如果嵌套组件满足上面关于何时创建PureComponent的解释,那么您可以将它们作为PureComponent本身编写。