Question

我希望了解 PureComponent与React中的组件之间的区别

我对React比较陌生，我正在关注的视频教程简要介绍了这些差异。

任何人都可以建议文章对这个主题有更深入的了解，并告诉两者如何区分 shouldComponentUpdate ？

Answer 1

两者之间的主要差异归结为shouldComponentUpdate

默认情况下，当我们扩展类组件时，它会将shouldComponentUpdate返回值设置为True，这意味着每次状态更改（或道具）时它都会呈现所有内容。

这会导致不必要的渲染，解决此问题的一种方法是使用条件来检查组件何时需要在组件中渲染。

例如像这样（这是一个浅薄的比较，即使你不知道什么是浅层比较，继续阅读）

shouldComponentUpdate (nextProps, nextState) {

    console.log("[Update App.js] Inside should Component Update")
    console.log(nextProps)
    console.log(nextState)
    //this should return True or False -> True Rendering updating continues, False -> Updating and rendering stops
    return nextState.person !== this.state.person ||
    nextState.showPerson !== this.state.showPerson
}

默认情况下，

PureComponent将调用shouldComponentUpdate并运行一个浅层比较的props和state来确定是否应该调用render。

但是PureComponent只会执行非常浅的检查，你不能期望对对象和数组做深度嵌套检查，因此我们说它是浅层检查。

注意：为了理解一些更简单的术语，浅质量检查意味着JS只检查值的对象id（例如，JS存储该特定对象信息的内存地址）是同样，并不是说他们的内容是一样的。在另一个深度质量检查将遍历每个元素，看看它们是否相等

您可以在此处进一步了解详情：https://reactjs.org/docs/shallow-compare.html

PureComponent与Component

1 个答案: