与基于类的方法相比，在使用 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 参考):

退出状态更新

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

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

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来自useState 仅在状态值不同于之前的值?

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?

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

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

在类组件中，如果我们在渲染方法中设置状态为无限会发生循环.这是因为类组件并不关心新状态与先前状态相同.它只是保持在每个 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.

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

Yes, hence its recommended not to call setState directly in 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屋！