更新反应17

Question

我找不到这两种生命周期方法的实际用法示例。我一直在写作反应一段时间，但是componentDidMount只是完成了工作，这意味着调用fetch异步数据，但我没有看到willMount的重点，任何线索？

Answer 1

好

componentWillMount在初始渲染之前运行。但建议不要在此方法中进行任何订阅和状态设置。如果你想在渲染之前做一些，你可以使用组件的构造函数。

在安装发生之前立即调用componentWillMount（）。它在render（）之前调用，因此同步调用setState（）在此方法中不会触发额外的渲染。一般来说，我们建议使用构造函数（）。避免引入任何此方法中的副作用或订阅。对于那些用例，请使用 componentDidMount（）代替。

可能的用例：

设置组件的初始状态（但您可以使用构造函数）
在服务器端渲染中运行服务器端代码以获取初始状态
获取数据并设置初始状态

然而，

componentDidMount在初始渲染之后运行，并在Component最终完成安装DOM时进行标记。因此，您可以使用它来设置订阅和侦听器，甚至可以将数据提取到setState。

componentDidMount（）在组件出现后立即调用安装。需要DOM节点的初始化应该放在这里。如果你需要从远程端点加载数据，这是一个好地方实例化网络请求。这种方法是一个很好的设置场所任何订阅。如果您这样做，请不要忘记取消订阅 componentWillUnmount（）。在此方法中调用setState（）将触发额外的渲染，但它会在浏览器更新之前发生屏幕。这保证即使将调用render（）在这种情况下两次，用户将看不到中间状态。使用这种模式要谨慎，因为它经常会导致性能问题。但是，对于像模态和工具提示这样的情况，它可能是必要的你需要在渲染依赖的东西之前测量DOM节点在它的大小或位置。

可能的用例：

设置事件侦听器，因为该组件已经安装
获取数据和setState
设置依赖于DOM的第三方库

BIG DIFFERENCE ：在服务器端呈现只有 componentWillMount 在服务器端运行。因此，如果您使用SSR，请确保 componentDidMount

中没有任何服务器端代码

目前您可以（您决定是否应该）使用两者来设置初始状态。一般来说，我见过大多数人都使用componentDidMount，但需求会发生变化，您可能会发现使用componentWillMount的一些用例。

然而，有人讨论过弃用生命周期方法。 here

Answer 2

componentWillMount和componentDidMount之间的区别在于它们的调用时间。在渲染之前调用componentWillMount，这意味着在renderWillMount中同步设置状态将不会导致额外的渲染调用，而在渲染之后调用componentDidMount，因此此方法中的任何状态更改都将导致一次额外的渲染调用。

对于任何异步调用，componentDidMount是要使用的而不是componentWillMount。

Answer 3

更新反应17

从React 16.3（2018年3月）开始不推荐使用

componentWillMount 。在React 17之前，此方法将继续起作用。代替它，您可以在类组件或 componentDidMount 中使用 constructor 。

From the official docs:

UNSAFE_componentWillMount（）以前被称为componentWillMount。该名称将一直使用到第17版。请使用named-unsafe-lifecycles codemod自动更新您的组件。

Answer 4

我定期使用componentWillMount。在我的情况下，我将它用作＆＃34;构造函数＆＃34;而不是真正的构造函数。

componentWillMount() {
    this.setState({
        myKey: myValue
    });
}

而不是

constructor(props) {
    super(props);

    this.state = {
        myKey: myValue
    };
}

您保存了一些代码行，并且不必调用超级函数。然后你可以发送你的ajax请求 - 而不是使用两个函数（constructor和componentDidMount）。

ComponentWillMount在生命周期中早于componentDidMount调用，所以这通常是放置必须尽快完成的事情的正确位置。

这不是一个强有力的论据，但足以解释为什么componentWillMount完全有用。

Answer 5

ComponentWillMount可用于初始化一些变量，对象或API库。例如，我以前用过使用AJAX调用从API获取用户的位置。通过此调用，我获得了该位置，并且我将保存要在应用程序中使用的位置。

ComponentDidMount非常适合订阅和更改DOM，因为此时DOM应该已准备就绪。有一种反模式表示你必须避免在ComponentDidMount中使用AJAX调用和数据集，但我认为这取决于你的解决方案以及你如何处理渲染功能。

何时使用componentWillMount而不是componentDidMount

5 个答案:

更新反应17