javascript - 与基于类的方法相比，使用 Hooks 设置状态后重新渲染有什么区别？

Question

类组件

在 React 类组件中，我们被告知 setState always 导致重新渲染，无论状态是否实际更改为新值。实际上，当状态更新为与之前相同的值时，组件将重新呈现。

Docs (setState API Reference) :

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

---

钩子(Hook)(函数组件)

然而，对于钩子(Hook)，文档指定将状态更新为与先前状态相同的值，将不会导致(子组件)重新渲染:

Docs (useState API Reference) :

Bailing out of a state update

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. this.setState 是否正确？在类组件中总是会导致重新渲染，即使是新的 state值与之前的值相同？
2. 在功能组件中带钩子(Hook)的，是否正确，setState来自 useState仅在 state 时才导致重新渲染值与之前的值不同？
3. 正在设置 state与 this.setState在render里面类组件的方法，与设置 state 相同在带钩子(Hook)的函数组件的函数体内？
4. 以下是正确的吗？
   • 在类组件中，如果我们设置state在render方法将发生无限循环。这是因为类组件 不关心新的state。和前面的一样state .它只是在每个 this.setState 上不断重新渲染.
   • 然而，在一个带钩子(Hook)的函数组件中，设置state在函数体内(它在重新渲染时运行，类似于 类组件 中的 render 方法)不会成为问题，因为函数组件 当它看到 state 时就退出重新渲染。与之前的 state 相同.

Answer 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?

如果您在 setState 中设置了一个有效值而不返回 null，除非您的组件是 PureComponent 或者您实现了 shouldComponentUpdate，否则重新渲染将始终由类组件中的 React 触发

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 钩子(Hook)的功能组件，如果使用相同的状态调用 setter ，则不会触发重新渲染。然而，对于偶尔的情况，如果立即调用 setter，它确实会导致两次渲染而不是一次渲染

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?

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

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

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% 正确，因为您可以使用以前的值触发状态更新，这样以前的值和当前的值就不同了。例如

setCount(count => count + 1);

在这种情况下，你的组件仍然会陷入死循环