与基于类的方法相比，使用Hooks设置状态后重新渲染时有什么区别? [英] What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?

问题描述

类组件

在React类组件中，我们被告知 setState 总是会导致重新渲染，而不管状态是否实际更改为新值.实际上，当状态更新为之前的相同值时，组件将重新渲染.

In React class components, we are told that setState always causes a re-render, regardless of whether or not the state actually changed to a new value. In effect, a component will re-render, when state updates to the same value it was before.

文档(setState API参考):

setState()将始终导致重新渲染，除非shouldComponentUpdate()返回false.

setState() will always lead to a re-render unless shouldComponentUpdate() returns false.

---

挂钩(功能组件)

但是，使用挂钩，文档会指定将状态更新为与先前状态相同的值，不会会导致(子组件的)重新渲染:

With hooks however, the docs specify that updating state to a value identical to the previous state, will not cause a re-render (of child components):

文档(useState API参考):

退出状态更新

如果将状态挂钩更新为与当前状态相同的值，React会在不渲染子级或发射效果的情况下纾困.(React使用Object.is比较算法.)

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

---

密切相关的问题

1. 即使新的 state 值与先前的值相同，类组件中的 this.setState 总是引起重新渲染是否正确?
2. 在带有钩子的功能组件中， useState 中的 setState 仅在 state 的值与先前的值不同吗?
3. 在类组件的 render 方法内使用 this.setState 设置 state 在带有钩子的功能组件的功能主体内设置 state ?
4. 以下正确吗?
   • 在类组件中，如果我们在 render 方法中设置 state ，则会发生无限循环.这是因为 class组件不在乎新的 state 是否与先前的 state 相同.它只是不断在每个 this.setState 上重新渲染.
   • 但是，在带有挂钩的功能组件中，在函数体内设置 state (重新渲染运行的方式与 render 方法类似在类组件中)不会成为问题，因为功能组件在看到状态与先前的状态相同.

1. Is it correct that this.setState in class components always cause a re-render, even when the new state value is identical to the previous?
2. Is it correct that in function components with hooks, setState from useState only causes a re-render if the state value is different from the previous value?
3. Is setting state with this.setState inside the render method of a class component, the same as setting state inside the function body of a function component with hooks?
4. Is the following correct?
   • In a class component, if we set state in the render method an infinite loop will occur. This is because the class component does not care that the new state is the same as the previous state. It just keeps re-rendering on every this.setState.
   • In a function component with hooks however, setting state inside the function body (which runs at re-render similarly to the render method in class components) would not be an issue, because the function component just bails out of re-renders when it sees that the state is identical to the previous state.

推荐答案

是否正确，类组件中的this.setState总是导致重新渲染，即使新的状态值与先前的状态值相同?

Is it correct that this.setState in class components always cause a re-render, even when the new state value is identical to the previous?

如果您在setState内设置了一个有效值(除了返回null之外)，则除非组件是PureComponent或实现了shouldComponentUpdate，否则类组件中的react总是会触发re-render

If you set a valid value apart from returning null within setState, a re-render will always be triggered by react in a class component unless your component is a PureComponent or you implement shouldComponentUpdate

在带有钩子的函数组件中，setState是否正确?如果状态值与以前的值?

Is it correct that in function components with hooks, setState from useState only causes a re-render if the state value is different from the previous value?

对于使用 useState 钩子的功能组件，setter(如果以相同状态调用)将不会触发重新渲染.但是，在偶尔的情况下，如果立即调用setter，则会导致两个渲染而不是一个渲染

For a functional component using useState hook, the setter if called with the same state will not trigger a re-render. However for an occasional case if the setter is called immediately it does result in two renders instead of one

正在使用this.setState设置状态吗?类组件，与功能体内的设置状态相同带有钩子的功能组件?

Is setting state with this.setState inside the render method of a class component, the same as setting state inside the function body of a function component with hooks?

从技术上讲，是的，如果在类组件导致无限循环的情况下，直接在render方法中设置状态将导致函数触发重新渲染，前提是功能组件的状态值不同.无论如何，它仍然会引起问题，因为由于功能组件直接调用状态更新，其他任何状态更新都将被还原

Techincally yes, setting a state directly in render method will cause the function to trigger re-render in case of class component causing an infinite loop which is the case for functional components provided the state values are different. Regardless of that, it will still cause an issue because any other state update will be reverted back due to functional component calling state update directly

在类组件中，如果我们在render方法中设置状态为无穷大循环将发生.这是因为类组件不在乎新状态与先前状态相同.它只是保持在每个this.setState上重新渲染.

In a class component, if we set state in the render method an infinite loop will occur. This is because the class component does not care that the new state is the same as the previous state. It just keeps re-rendering on every this.setState.

是的，因此建议不要在渲染中直接调用setState

Yes, hence its recommended not to call setState directly in render

但是，在具有挂钩的功能组件中，请在内部设置状态函数体(在重新渲染时运行，类似于render方法在类组件中)不会有问题，因为该函数组件看到状态为与以前的状态相同.

In a function component with hooks however, setting state inside the function body (which runs at re-render similarly to the render method in class components) would not be an issue, because the function component just bails out of re-renders when it sees that the state is identical to the previous state.

不是100％正确，因为您可以使用前一个值触发状态更新，从而使前一个值和当前值不相同.例如

Not 100% true, since you can trigger state update using previous value such that the previous and current value are not same.For example

setCount(count => count + 1);

在这种情况下，您的组件仍然会陷入无限循环

In such a case, you component will still fall in an infinite loop

这篇关于与基于类的方法相比，使用Hooks设置状态后重新渲染时有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！