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

>类组件

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

文档(设置状态 API 参考)：

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

挂钩(功能组件)

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

文档(使用状态 API 参考)：

纾困状态更新

如果将状态挂钩更新为与当前状态相同的值， React 将在不渲染子项或触发效果的情况下进行救助。 (React 使用 Object.is 比较算法。

密切相关的问题

类组件中的this.setState总是导致重新呈现是否正确，即使新的state值与以前的值相同？
在带有钩子的函数组件中，仅当state值与以前的值不同时，setStatefromuseState才会导致重新呈现，这是否正确？
在类组件的render方法中设置带有this.setState的state，与在带有钩子的函数组件的函数体中设置state相同吗？
以下正确吗？在
- 类组件中，如果我们在render方法中设置state，将发生无限循环。这是因为类组件并不关心新state是否与以前的state相同。它只是在每个this.setState上不断重新渲染。
- 然而，在带有钩子的函数组件中，在函数体内设置state(在重新渲染时运行类似于类组件中的render方法)不会成为问题，因为函数组件只是在看到state与以前的state相同时退出重新渲染。

类组件中的 this.setState 总是导致重新渲染，即使新的状态值与以前的状态值相同？

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

在带有钩子的函数组件中，setState 从 useState 仅在状态值不同于以前的值？

对于使用useStatehook 的功能组件，如果以相同状态调用 setter，则不会触发重新渲染。但是，对于偶尔的情况，如果立即调用setter，则确实会导致两个渲染而不是一个渲染

在类组件，与在函数体内设置状态相同带有钩子的功能组件？

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

在

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

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

但是，在带有钩子的函数组件中，在函数体(在重新渲染时运行，类似于渲染方法) 在类组件中)不会成为问题，因为函数组件只是在看到状态为与以前的状态相同。

不是 100% true，因为您可以使用以前的值触发状态更新，以便以前的值和当前值不同。例如

setCount(count => count + 1);

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

这不是对 OP 的直接回答，但对于一些刚接触 React 和/或 Hooks 并努力解决其副作用和渲染时间的人来说，这可能是相关的，并且可能会有所帮助。

由于这里还没有提到它：在功能组件中，而不是使用前面提到的(请参阅接受答案的评论)ShouldComponentUpdate()函数，它仅适用于基于类的组件，您将使用useEffect()钩子。有了它，您可以告诉您的组件何时运行副作用以及在什么条件下运行，例如，当某些依赖项已更改时。

在这个来自 React 文档的例子中，只有当props.source更改时，函数才会被执行。

useEffect(
() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
},
[props.source],
);

React docs： useEffect()

相关内容