Reactjs 烟雾弥漫'；设置状态'；在官方文件中

我正在阅读react.js官方文档。 这是它们的一部分

我对这一段感到困惑：

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

---

问题：如果使用了可变对象并且在

shouldComponentUpdate（）

中无法实现条件呈现逻辑，为什么调用

setState（）

将避免不必要的重新呈现？

我认为您读错了

这是一个两项条件：

如果

正在使用可变对象

及

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

然后

[您应该仅在新状态与前一状态不同时调用]setState（）[因此它]将避免不必要的重新渲染

（括号内为本人的修改。）

---

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

setState

，由您自己来测试。

我认为您读错了

这是一个两项条件：

如果

正在使用可变对象

及

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

然后

[您应该仅在新状态与前一状态不同时调用]setState（）[因此它]将避免不必要的重新渲染

（括号内为本人的修改。）

---

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

setState

，由您自己来测试。

文档想说，在以下情况下，不会发生重新渲染：

如果shouldComponentUpdate钩子返回false

如果正在使用可变对象

如果某些条件逻辑未用于重新渲染（如shouldcomponentupdatehook中的强制更新）

如果调用setState方法的效果仅更改以前的状态值

---

顺便说一句，我仍然不满意我说得不够清楚（：

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

如果shouldComponentUpdate钩子返回false

如果正在使用可变对象

如果某些条件逻辑未用于重新渲染（如shouldcomponentupdatehook中的强制更新）

如果调用setState方法的效果仅更改以前的状态值

顺便说一句，我仍然不满意我说得不够清楚

深度潜水可能会对你有帮助

• 调用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')

不可变对象示例：

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，则react默认情况下将定义shouldComponentUpdate（），以减少不必要的重新渲染。但您需要使用不可变对象才能正常工作（即手动创建新数组或对象并指定给您的状态，否则您的组件将无法正确重新渲染）

• 因此，他们提出的要点是：除非状态值已实际更改，否则不要调用setState（），如果您使用的是正常的react组件，而没有进行shouldComponentUpdate（）检查，以避免出现以下情况：

注意：虽然items的值没有改变，但是如上所示会导致组件的浪费性重新呈现。因此，如果值没有改变，请避免设置状态

深度潜水可能会对你有帮助

• 调用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')

不可变对象示例：

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，则react默认情况下将定义shouldComponentUpdate（），以减少不必要的重新渲染。但您需要使用不可变对象才能正常工作（即手动创建新数组或对象并指定给您的状态，否则您的组件将无法正确重新渲染）

• 因此，他们提出的要点是：除非状态值已实际更改，否则不要调用setState（），如果您使用的是正常的react组件，而没有进行shouldComponentUpdate（）检查，以避免出现以下情况：

注意：虽然items的值没有改变，但是如上所示会导致组件的浪费性重新呈现。因此，如果值没有改变，请避免设置状态

---

感谢您的及时回复！如果我的理解正确，

可变对象