为啥 componentWillUpdate() 和 componentWillMount() 在这些方法中使用 setState 时不会触发渲染函数？

Posted 2023-02-23

【中文标题】为啥 componentWillUpdate() 和 componentWillMount() 在这些方法中使用 setState 时不会触发渲染函数？

【英文标题】：Why do componentWillUpdate() and componentWillMount() not trigger render function when setState used in these methods?为什么 componentWillUpdate() 和 componentWillMount() 在这些方法中使用 setState 时不会触发渲染函数？

【发布时间】：2017-04-09 07:00:49

【问题描述】：

我们可以在每个组件生命周期方法中调用 setState()。

为什么我们不在 componentWillUpdate() 和 componentWillMount() 中调用它？

为什么这些方法在将 setState 放入其中时不触发渲染功能？

谁能详细解释一下？

谢谢。

【问题讨论】：

在***.com/questions/28945089/…的一些相关讨论（有人说“这些方法应该纯粹与渲染有关，请不要在其中使用'业务逻辑'”）

【参考方案1】：

setState() in componentWillMount()

componentWillMount() 在安装发生之前立即调用。它 在render() 之前调用，因此在此方法中设置状态将 不会触发重新渲染。

componentWillMount() 中的

setState() 不会触发重新渲染，但此时我们还没有调用过render()。所以，这里设置状态会在我们进入第一个render() pass之前准备好状态对象。

实际上，要为我们的第一个render() 准备状态对象，更好的方法是使用constructor() 而不是在componentWillMount 中调用setState。

更多阅读：

official doc

a more comprehensive unofficial doc

---

setState() in componentWillUpdate()

请注意，您不能在此处致电this.setState()。如果您需要更新 状态以响应道具更改，使用componentWillReceiveProps() 而是。

每次需要重新渲染时都会调用componentWillUpdate()，例如调用this.setState() 时。我们在这里不调用this.setState() 的原因是该方法触发了另一个componentWillUpdate()。如果我们在componentWillUpdate() 中触发状态更改，我们将陷入无限循环。

更多阅读：

Official doc

comprehensive unofficial doc

【讨论】：

非常感谢！

对不起，我只有 11 个代表不能在 15 岁以下投票：) 我是新人。

【参考方案2】：

组件根据其状态变化重新渲染，React 决定下一次渲染的时间和内容。 setState() 可能是异步的，React 可能会将多个 setState() 调用批处理到单个更新中以提高性能。

您不能在这些方法中调用setState() 仅仅是因为它们被设计为在实际安装/更新发生之前执行某些操作。它们不是用于启动新的渲染。

Facebook 解释组件生命周期here。

【参考方案3】：

调用setState() 会导致组件重新渲染。一旦组件重新渲染，它将调用这些方法。因此，在这些方法中调用 setState 可能会触发重新渲染循环，因为它无法完成组件的渲染。