React 官方文档中关于“setState"的阴霾 [英] Haze about 'setState' in React official doc

问题描述

我正在阅读 react.js 官方文档.这是其中一个.

我对这一段感到困惑:

<块引用>

setState() 总是会导致重新渲染，除非shouldComponentUpdate() 返回 false.如果可变对象被使用和条件渲染逻辑不能在shouldComponentUpdate()，只有当新状态出现时才调用 setState()与之前的状态不同将避免不必要的重新渲染.

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

解决方案

shouldComponentUpdate 深潜可能帮你

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

可变对象示例:

const a = [1,2];//a 的内存地址为 0xff456ea.push(3);//a 的内存地址为 0xff456e(相同)

不可变对象示例:

 let b = '你好';//b 的内存地址为 0xee7​​89eb = '世界';//b 的内存地址是 0xee7​​89f(不同，因为它是一个用值 'World' 创建的新对象)

• 如果您的组件是 PureComponent，那么默认情况下 react 将定义 shouldComponentUpdate() 以减少不必要的重新渲染.但是您需要使用不可变对象才能正常工作(即手动创建一个新数组或对象并分配给您的状态，否则您的组件将无法正确重新渲染).

• 所以，他们的观点是:不要调用 setState()，除非状态值实际上已经改变，如果您使用的是 正常 反应组件没有一个 shouldComponentUpdate() 检查来避免这样的情况:

<块引用>

 this.setState({ items: [1, 2, 3] });//重新渲染一次//这里有很多代码this.setState({ 项目: [1, 2, 3] });//重新渲染两次

注意:虽然items的值没有变化，但是有如上图所示造成的组件重新渲染的浪费.因此，如果值没有变化，请避免设置状态.

I am reading react.js official docs. Here is one of them.

I am confused about this paragraph:

setState() will always lead to a re-render unless shouldComponentUpdate() returns false. If mutable objects are being used and conditional rendering logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

Question: Why calling setState() will avoid unnecessary re-renders if mutable objects are being used and conditional rendering logic cannot be implemented in shouldComponentUpdate()?

解决方案

shouldComponentUpdate deep-dive might help you

• Calling setState() will always trigger a re-render of the component(unless you have defined shouldComponentUpdate()). But keeping performance and efficiency in mind, we want the component to re-render only if the state value has actually changed.
• This is where shouldComponentUpdate() lifecycle method comes into play. In this method, a check can be done to determine whether the state value has changed. If state has changed, returns true and the component re-renders.
• Mutable objects refer to Arrays, objects etc in javascript. Numbers and Strings are immutable.

Mutable object example:

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

Immutable object example:

 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')

• If your component is a PureComponent, then react by default will define the shouldComponentUpdate() to reduce unnecessary re-renders. But you need to use immutable objects for that to work correctly(i.e create a new array or object manually and assign to your state, else your component won't re-render correctly).

• So, the point they are making is this : Don't call setState() unless the state value has actually changed if your using a normal react component without a shouldComponentUpdate() check to avoid situations like this:

 this.setState({ items: [1, 2, 3] }); // re-render once
 // lot of code goes here
 this.setState({ items: [1, 2, 3] }); // re-render twice

Note: Although the value of items is unchanged, there is a wasteful re-render of the component caused as shown above. So, avoid setting state if there is no change of value.

这篇关于React 官方文档中关于“setState"的阴霾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！