1. 首页
  2. 问题
  3. 与基于类的方法相比，使用Hooks设置状态后重新渲染时，有什么区别？
小编典典

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

reactjs

类组件

在React类组件中，告诉我们setState 始终* 会导致重新渲染，无论状态是否实际更改为新值。实际上，当状态更新为之前的 相同
值时，组件 将 重新渲染。 *

Docs（setState API参考）：

除非shouldComponentUpdate（）返回false，否则setState（）将始终导致重新渲染。

挂钩（功能组件）

但是，使用挂钩时，文档将更新状态指定为与先前状态相同的值， 不会 导致（子组件）重新呈现：

Docs（useState API参考）：

摆脱状态更新

如果您将State Hook更新为与当前状态相同的值，React将在不渲染子级或激发效果的情况下纾困。（React使用Object.is比较算法。）

密切相关的问题

  1. this.setState即使新state值与以前的值相同，类中的组件始终会导致重新渲染是否正确？
  2. 在带有钩子的 功能组件中 ，如果值与先前值不同，setStatefrom useState仅会导致重新渲染是否正确state？
  3. 在 类组件 的方法内部进行设置是否state与 带有钩子 的 函数组件 的函数内部进行设置相同？this.setState``render state
  4. 以下正确吗？
    • 在 类组件中 ，如果我们state在render方法中进行设置，则会发生无限循环。这是因为 类组件 不在乎新state的与先前的相同state。它只是在每个上保持重新渲染this.setState。
    • 但是，在 具有钩子 的 函数组件 中，state在函数体内进行设置（render与 类组件中 的方法类似，在重新渲染时运行）将 不是 问题，因为当看到该 组件时 ， 功能组件 只是摆脱了重新渲染state与之前相同state。

阅读 843

收藏
2020-07-22

共1个答案

小编典典

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

如果您在setState内设置了一个有效值，而不是返回null，则除非组件是PureComponent或实现了shouldComponentUpdate，否则始终会通过在类组件中进行反应来触发重新渲染

在带有钩子的函数组件中，仅当状态值与先前值不同时，useState中的setState才会导致重新渲染吗？

对于使用useState挂钩的功能组件，如果以相同状态调用设置器，则不会触发重新渲染。但是，在偶尔的情况下，如果立即调用setter，则会导致两次渲染而不是一次渲染

在类组件的render方法中使用this.setState设置状态是否与带有钩子的函数组件的功能体内的设置状态相同？

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

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

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

但是，在具有钩子的函数组件中，在函数主体内设置状态（类似于类组件中的render方法，它在重新渲染时运行）不会有问题，因为当看到该功能组件时，它只是摆脱了重新渲染该状态与先前的状态相同。

不是100％正确，因为您可以使用先前的值触发状态更新，以使先前的值和当前值不相同。

setCount(count => count + 1);

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

2020-07-22