componentWillMount已被弃用，并将在React Native的下一个重大版本0.54.0中被移除。

Question

我使用React Native的最新版本0.54.0, 在iOS上运行应用程序时会出现关于生命周期方法不推荐使用的警告，并请更新组件。

警告：

componentWillMount已被弃用，将在下一个主要版本中删除。请改用componentDidMount。作为临时解决方法，您可以将其重命名为UNSAFE_componentWillMount。 请更新以下组件：Container、Text、TouchableOpacity、Transitioner、View

我已根据警告更改了每个方法并添加了前缀UNSAFE_。

UNSAFE_componentDidMount() {
}
UNSAFE_componentWillMount() {
}
UNSAFE_componentWillUpdate(nextProps, nextState) {
}
UNSAFE_componentWillReceiveProps(nextProps) {
}

尽管警告持续出现，请帮助我。

目前我已经隐藏了应用程序中的YellowBox警告。

import { YellowBox } from 'react-native';

render() {

  YellowBox.ignoreWarnings([
    'Warning: componentWillMount is deprecated',
    'Warning: componentWillReceiveProps is deprecated',
  ]);
}

- Kirit Modi

---

我在我的SSR Web应用程序中使用componentWillMount，似乎有讨论要添加componentWillServerRender（可能会被命名为其他内容） https://github.com/reactjs/rfcs/pull/8/files/fe1c7bf56d792328a4c554fc51f80bc3503b995b#diff-6aaaf484b3a1d656cf6d95ee5dfbfd97因此，一种替代方案可能是等待尘埃落定后再升级并切换到新的钩子？（如果它们被添加...如果没有。那就重新慌了） - Rohan Büchner

Answer 1

你应该将所有的代码从componentWillMount移动到constructor或componentDidMount中。

componentWillMount()在挂载之前被调用。它在render()之前被调用，因此在这个方法中同步调用setState()不会触发额外的渲染。通常情况下，我们建议使用constructor()代替。避免在这个方法中引入任何副作用或订阅。对于这些用例，使用componentDidMount()代替。这是唯一在服务器端呈现时调用的生命周期钩子。

componentDidMount()在组件挂载后立即调用。需要DOM节点的初始化应该放在这里。如果需要从远程端点加载数据，则可以在此处实例化网络请求。这个方法是设置任何订阅的好地方。如果这样做，请不要忘记在componentWillUnmount()中取消订阅。在这个方法中调用setState()将触发额外的渲染，但它会在浏览器更新屏幕之前发生。这保证了即使在这种情况下render()会被调用两次，用户也看不到中间状态。谨慎使用这种模式，因为它经常导致性能问题。然而，在像modals和tooltips这样的情况下，当您需要在渲染依赖于其大小或位置的东西之前测量一个DOM节点时，它可能是必要的。 来自官方文档

- Vladimir K.

---

我没有任何与componentWillMount相关的明确位置，但是在我的app.js中，在构造函数之后有一行代码，其中包含state={tabindex:0}。我该如何将其“移动”到构造函数中？ - pashute

构造函数(props) {超级(props); 这个状态 = {标签页:0}} - Dror Bar

Answer 2

componentDidMount并未被废弃，仍然可以安全使用，因此无需在该方法中添加UNSAFE_。 componentWillSomething 方法似乎正在退出舞台。如果不产生副作用，请使用构造函数来代替componentWillMount，如果有副作用，请使用componentDidMount。

- Elliott Jones

Answer 3

为了使用constructor或componentDidMount，您应该避免使用componentWillSomething。

但是，您必须非常谨慎地选择要使用的方法。一个典型的场景是当您想要在打开屏幕后立即显示加载状态（使用state）时。

this.setState({ isLoading: true });
...
this.setState({ isLoading: false});

在这种情况下，您需要使用componentDidMount来设置状态。这就是React关于constructors的说法：

通常，在React中，构造函数仅用于两个目的：

1. 通过将对象分配给this.state来初始化本地状态。 2. 将事件处理程序方法绑定到实例。

您不应在constructor()中调用setState()。相反，如果组件需要使用localstate，则应在构造函数中直接将初始状态赋值给this.state。

祝写代码愉快！

- Faustino Gagneten