新しく追加された React のライフサイクルとは何ですか?

新しく追加されたライフサイクルは次のとおりです: 1. getDerivedStateFromProps、状態を更新するプロパティのプロセスを制御するために使用されます; 2. getSnapshotBeforeUpdate、最新の DOM データを読み取るために使用されます; 3. componendDidCatch。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

React を学習するとき、ライフ サイクルは非常に重要です。ライフ サイクルの各コンポーネントを理解すると、高パフォーマンスのコンポーネントを作成するのに非常に役立ちます。

React ライフ サイクルは 3 つの状態に分けられます 1. 初期化 2. 更新 3. 破壊

React 17 新しいライフサイクル

1. ライフサイクルの廃止

公式 Web サイトのドキュメントでは、これらのライフサイクルを使用するコードは、特に非同期レンダリング バージョンの場合、react の将来のバージョンでバグが発生する可能性が高くなると指摘しています。レンダリング機構は将来的に採用される予定で、バージョン 17 で削除されたライフ サイクル フック機能になります。 ## 2. 新しいライフサイクル

getDerivedStateFromProps(nextProps, prevState)

は、componentWillReceiveProps を置き換えるために使用され、プロセスの制御に使用できます。状態を更新する props です。新しい状態を表すオブジェクトを返します。更新が必要ない場合は、null を返します。

初期マウントやその後の更新に関係なく、各レンダリングの前に呼び出されます。これは、componentWillReceiveProps (とは異なります)親コンポーネントが再レンダリングを引き起こすときのみ呼び出されます簡単に理解すると、プロパティから状態を取得することです。このライフサイクルの機能は、実際には、受信したプロパティを状態にマップすることですgetDerivedStateFromPropsも静的関数であるため、この関数は this を介してクラスのプロパティにアクセスすることはできず、プロパティに直接アクセスすることはお勧めできません。代わりに、パラメーターによって提供される nextProps と prevState によって判断され、マッピングされる必要があります。新しく渡されたpropsに従って状態にします

propsで渡された内容が状態に影響を与える必要がない場合はnullを返す必要があります。この戻り値は必要なので書いてみてください関数の最後まで #<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>static getDerivedStateFromProps(nextProps, prevState) { const {type} = nextProps; // 当传入的type发生变化的时候，更新state if (type !== prevState.type) { return { type, }; } // 否则，对于state不进行任何操作 return null; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

getSnapshotBeforeUpdate()

最新の変更が DOM 要素に送信される前に、コンポーネントは変更の前に現在の値を取得できます。変更すると、このライフ サイクルによって返された値は、componentDidUpdate() に渡されます。

ComponentWillUpdate を置き換えるために使用されます。この関数は、更新後、DOM が更新される前に呼び出されます。最新のデータを読み取るために使用されます。 DOM データ。戻り値は、最新のレンダリング データが DOM に送信される前に、componentDidUpdate

の 3 番目のパラメーターとして使用されます。直前に呼び出され、変更される前にコンポーネントのデータを取得できます。

componendDidCatch(error, info)

コンポーネントがcomponentDidCatchライフサイクルを定義している場合、そのコンポーネントはエラー境界になります(エラー境界はレンダリング中にエラーをキャッチします。ライフサイクル メソッドとその下のツリー全体のコンストラクターでは、

これは try catch を使用するのと同じです。いいえ、アプリケーションの可用性を確保するためにエラーが直接スローされます)

##3. 基本的な使用方法

class A extends React.Component {
  // 用于初始化 state
  constructor() {}
  // 用于替换 `componentWillReceiveProps` ，该函数会在初始化和 `update` 时被调用
  // 因为该函数是静态函数，所以取不到 `this`
  // 如果需要对比 `prevProps` 需要单独在 `state` 中维护
  static getDerivedStateFromProps(nextProps, prevState) {}
  // 判断是否需要更新组件，多用于组件性能优化
  shouldComponentUpdate(nextProps, nextState) {}
  // 组件挂载后调用
  // 可以在该函数中进行请求或者订阅
  componentDidMount() {}
  // 用于获得最新的 DOM 数据
  getSnapshotBeforeUpdate() {}
  // 组件即将销毁
  // 可以在此处移除订阅，定时器等等
  componentWillUnmount() {}
  // 组件销毁后调用
  componentDidUnMount() {}
  // 组件更新后调用
  componentDidUpdate() {}
  // 渲染组件函数
  render() {}
}

[関連する推奨事項: Redis ビデオ チュートリアル

]

以上が新しく追加された React のライフサイクルとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。