web-dev-qa-db-ja.com

componentWillMountは廃止され、React Nativeの次のメジャーバージョン0.54.0で削除されます

私は、0.54.0のネイティブの最新バージョンを使用し、iOSでアプリを実行するたびに、ライフサイクルメソッドの廃止に関する警告が見つかりました。また、コンポーネントを更新してください。

警告：

componentWillMountは廃止され、次のメジャーバージョンで削除されます。代わりにcomponentDidMountを使用してください。一時的な回避策として、UNSAFE_componentWillMountに名前を変更できます。次のコンポーネントを更新してください：Container、Text、TouchableOpacity、Transitioner、View

また、waring add prefix 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',
  ]);
}
react-nativereact-native-androidreact-native-ios
22
Kirit Modi

すべてのコードをcomponentWillMountからコンストラクターまたはcomponentDidMountに移動する必要があります。

componentWillMount（）は、マウントが発生する直前に呼び出されます。 render（）の前に呼び出されるため、このメソッドでsetState（）を同期的に呼び出しても、余分なレンダリングはトリガーされません。通常、代わりにconstructor（）を使用することをお勧めします。このメソッドに副作用やサブスクリプションを導入しないでください。これらのユースケースでは、代わりにcomponentDidMount（）を使用してください。これは、サーバーレンダリングで呼び出される唯一のライフサイクルフックです。

componentDidMount（）は、コンポーネントがマウントされた直後に呼び出されます。 DOMノードを必要とする初期化はここで行う必要があります。リモートエンドポイントからデータをロードする必要がある場合、これはネットワーク要求をインスタンス化するのに適した場所です。このメソッドは、サブスクリプションをセットアップするのに適した場所です。その場合は、componentWillUnmount（）で登録を解除することを忘れないでください。このメソッドでsetState（）を呼び出すと、追加のレンダリングがトリガーされますが、ブラウザーが画面を更新する前に発生します。これにより、この場合render（）が2回呼び出されても、ユーザーには中間状態が表示されないことが保証されます。このパターンはパフォーマンスの問題を引き起こすことが多いため、注意して使用してください。ただし、モーダルやツールチップなど、DOMノードのサイズや位置に依存するものをレンダリングする前に測定する必要がある場合に必要になることがあります。

公式ドキュメントから

22
Vladimir K.

componentDidMountは非推奨ではなく、間違いなく使用しても安全であるため、UNSAFE_をそのメソッドに追加する必要はありません。 componentWill Somethingメソッドは、現在進行中のようです。 componentWillMountの代わりに、副作用を引き起こさないものにはコンストラクタを使用し、副作用を生じないものにはcomponentDidMountを使用します。

10
Elliott Jones