Question

我正在阅读react.js官方文档。这是one。

我对这一段感到困惑：

setState（）将始终导致重新渲染，除非 shouldComponentUpdate（）返回false。如果是可变对象使用和条件渲染逻辑无法实现 shouldComponentUpdate（），仅在新状态时调用setState（）与以前的状态不同，将避免不必要的重新渲染。

问题：如果正在使用可变对象且无法在setState()中实现条件呈现逻辑，为什么调用shouldComponentUpdate()将避免不必要的重新渲染？

Answer 1

shouldComponentUpdate深潜可能会帮助你

调用setState（）将始终触发组件的重新呈现（除非您已定义了shouldComponentUpdate（））。但是考虑到性能和效率，我们希望只有在状态值实际发生变化时才重新渲染组件。
这是shouldComponentUpdate（）生命周期方法发挥作用的地方。在该方法中，可以进行检查以确定状态值是否已经改变。如果状态已更改，则返回true并重新呈现组件。
可变对象在javascript中引用数组，对象等。数字和字符串是不可变的。

可变对象示例：

const a = [1,2]; // memory address of a is 0xff456e
a.push(3); // memory address of a is 0xff456e(same)

不可变对象示例：

 let b = 'Hello'; // memory address of b is 0xee789e
 b = 'World'; // memory address of b is 0xee789f(different because its a new object created with value 'World')

如果您的组件是PureComponent，则默认情况下反应将定义shouldComponentUpdate（）以减少不必要的重新渲染。但是你需要使用不可变对象才能正常工作（即手动创建一个新的数组或对象并分配给你的状态，否则你的组件将无法正确重新渲染）。
所以，他们提出的要点是这样的：如果您使用正常做出反应，请不要调用setState（），除非状态值实际已更改组件没有一个shouldComponentUpdate（）检查以避免这样的情况：

 this.setState({ items: [1, 2, 3] }); // re-render once
 // lot of code goes here
 this.setState({ items: [1, 2, 3] }); // re-render twice
注意：虽然项目的值没有改变，但是如上所示，会导致组件的浪费重新渲染。因此，如果没有值的变化，请避免设置状态。

Answer 2

我认为你读错了。

这是一个两个条件的条件：

如果

正在使用可变对象

和

条件渲染逻辑无法在shouldComponentUpdate（）
中实现

THEN

[你应该调用] setState（）只有当新状态与以前的状态不同时[所以它]将避免不必要的重新渲染。

（由我改动在括号内。）

基本上，这意味着由于您的技术限制，如果您不能依赖React的内部测试，那么您应该来测试是否应该致电setState

Answer 3

该文档想说，在以下条件下，重新渲染不会发生：

如果shouldComponentUpdate挂钩返回false。
如果正在使用可变对象。
如果没有使用某些条件逻辑来重新渲染，就像在shouldComponentUpdate hook中强制更新一样。
如果调用setState方法的效果只改变以前的状态值。

在React官方文档中关于'setState'的阴霾

3 个答案: