React の古いライフ サイクルと新しいライフ サイクルの違いは次のとおりです。 1. 新しいライフ サイクルからは、componentWillMount、componentWillReceiveProps、componentWillUpdate という 3 つの Will フックが削除されました。 2. 新しいライフ サイクルには、getDerivedStateFromProps という 2 つの新しいフックが追加されました。 (プロパティの状態から派生) と getSnapshotBeforeUpdate。
このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。
React にはバージョン 16.3 の前後で 2 つのライフサイクルがあり、16.3 より前は旧バージョン、それ以降は新バージョンがありますが、基本的には同じです。
React ライフサイクル (古い)
強調しておきたいのは、componentWillReceiveProps 関数は、プロパティが初めて渡されたときは呼び出されず、2 回目以降 (2 回目も含む) にプロパティが渡されたときにのみ呼び出されることです。
shouldComponentUpdate はバルブのようなもので、この更新のステータスを再レンダリングする必要があるかどうかを決定するために戻り値 (true または false) を必要とします。
React ライフサイクル (新規)
React の新旧ライフサイクルの違い
新しいライフサイクルでは、componentWillMount、componentWillReceiveProps、componentWillUpdate という 3 つの Will フックが削除されます。
新しいライフサイクルでは、次の 2 つの新しいフックが追加されます。
1. getDerivedStateFromProps: props から派生状態を取得します。
2 つのパラメータを受け入れます: props、state
状態の値を変更するために使用される状態オブジェクトまたは null を返します。
使用シナリオ: state の値が props に依存する場合はいつでも、getDerivedStateFromProps を使用できます。
2. getSnapshotBeforeUpdate: アップデート前のスナップショットを取得します（アップデート前のデータも取得できます）
DOM を更新する前に呼び出されます
オブジェクトまたはnullを返し、戻り値はcomponentDidUpdateに渡されます。
ComponentDidUpdate(): DOM の更新後に呼び出されます。
3 つのパラメータを受け入れます: preProps、preState、snapshotValue
使用例:
高さが固定された p は定期的に新しい行を追加するため、新しい行を追加しても、現在表示されている行の高さは変更されません。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate の使用シナリオ</title><style>.list{width: 200px;height: 150px;background-color: skyblue ;overflow: auto;}.news{height: 30px;}</style></head><body><!-- 「コンテナ」を準備します --><div id="test"></div >< !-- 反応コア ライブラリの導入 --><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- 反応 -dom の導入、DOM を操作するための反応のサポートに使用されます --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- 導入jsx を js に変換する babel --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type="text/babel" >class NewsList extends React.Component{ state = {newsArr:[]}ComponentDidMount(){setInterval(() => {//元の状態を取得します const {newsArr} = this.state//ニュースをシミュレートします const news = ' News'+ (newsArr.length+1)//ステータスを更新 this.setState({newsArr:[news,...newsArr]})}, 1000);} getSnapshotBeforeUpdate(){return this.refs.list .scrollHeight} ComponentDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - height} render(){return(<div className="list" ref="list"> {this.refs.list.scrollHeight - height} state.newsArr.map((n,index)=>{return <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM をレンダリングします。 NewsList/>,document.getElementById('test'))</script></body></html>例証します:
React v16.3 では、新しいライフサイクルの変更が導入されています。古いライフサイクルも使用されますが、非推奨の警告がコンソールに表示されます。また、3 つのライフサイクル フックが廃止される予定であるため、使用しないように注意してください。または、接頭辞 UNSAFE_ を前に追加することもできます。