componentWillMount 已弃用，将在 React Native 的下一个主要版本 0.54.0 中删除 [英] componentWillMount is deprecated and will be removed in the next major version 0.54.0 in React Native

问题描述

我使用 react native 最新版本 0.54.0，每当在 iOS 上运行应用程序时，都会发现有关弃用生命周期方法的警告.并请更新组件.

I use the react native latest version of 0.54.0 and Whenever run the apps on iOS there is found warning about deprecate the lifecycle methods. and also please update the components.

警告:

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

我也有根据waring添加前缀UNSAFE_的每个方法的变化.

I Have also change according to the waring add prefix UNSAFE_ each of the method.

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

尽管警告仍在继续.请帮帮我.

Although the warning continue. Please help me.

目前我在我的应用中隐藏了 YellowBox 警告.

Currently I have hide the YellowBox waring in my Apps.

import { YellowBox } from 'react-native';

render() {

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

推荐答案

您应该将所有代码从 componentWillMount 移动到构造函数或 componentDidMount.

You should move all the code from the componentWillMount to the constructor or componentDidMount.

componentWillMount() 在挂载发生之前被调用.它在 render() 之前调用，因此在该方法中同步调用 setState() 不会触发额外的渲染.通常，我们建议改用构造函数().避免在此方法中引入任何副作用或订阅.对于这些用例，请改用 componentDidMount().这是在服务器渲染上调用的唯一生命周期钩子.

componentWillMount() is invoked just before mounting occurs. It is called before render(), therefore calling setState() synchronously in this method will not trigger an extra rendering. Generally, we recommend using the constructor() instead. Avoid introducing any side-effects or subscriptions in this method. For those use cases, use componentDidMount() instead. This is the only lifecycle hook called on server rendering.

componentDidMount() 在组件安装后立即调用.需要 DOM 节点的初始化应该在这里进行.如果您需要从远程端点加载数据，这是实例化网络请求的好地方.此方法是设置任何订阅的好地方.如果这样做，请不要忘记在 componentWillUnmount() 中取消订阅.在这个方法中调用 setState() 会触发额外的渲染，但它会在浏览器更新屏幕之前发生.这保证了即使在这种情况下 render() 将被调用两次，用户也不会看到中间状态.请谨慎使用此模式，因为它通常会导致性能问题.但是，当您需要在渲染取决于其大小或位置的内容之前测量 DOM 节点时，对于模态和工具提示等情况可能是必要的.

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount(). Calling setState() in this method will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

来自官方文档

这篇关于componentWillMount 已弃用，将在 React Native 的下一个主要版本 0.54.0 中删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！