ホームページ >ウェブフロントエンド >フロントエンドQ&A >React の古いライフサイクルと新しいライフサイクルの違いは何ですか
React の古いライフサイクルと新しいライフサイクルの違いは何ですか
- 青灯夜游オリジナル
- 2022-07-13 19:13:461849ブラウズ
react の古いライフ サイクルと新しいライフ サイクルの違い: 1. 新しいライフ サイクルからは、componentWillMount、componentWillReceiveProps、componentWillUpdate という 3 つの Will フックが削除されました; 2. 2 つの新しいフックが、新しいライフサイクル、つまり getDerivedStateFromProps. (プロパティから派生した状態を取得) と getSnapshotBeforeUpdate。
#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。
React には、バージョン 16.3 の前後で 2 つのライフ サイクルがあります。16.3 より前は古いバージョン、それ以降は新しいバージョンです。古いバージョンと新しいバージョンには違いがありますが、基本的には同じです。
React ライフ サイクル (旧)
componentWillReceivePropsこの関数は、初めてプロパティが渡されたときは呼び出されません。 2 回目 (2 回目も含む) 以降、プロパティが
## で渡されたときにのみ呼び出されます。 #ShouldComponentUpdateバルブと同様に、この更新のステータスを再レンダリングする必要があるかどうかを判断するには戻り値 (true または false) が必要です
React ライフ サイクル (新規)
新しいライフ サイクルRemove
3 つの Will フックが追加されます。つまり、componentWillMount、componentWillReceiveProps、componentWillUpdate 新しいライフ サイクルでは、2 つの新しいフック、つまり # が追加されます。 ##1,
getDerivedStateFromProps: props から派生状態を取得します。
2 つのパラメーターを受け入れます: props、state
戻り値state オブジェクトまたは null。state の値を変更するために使用されます。
使用シナリオ: state の値が props に依存する場合はいつでも、getDerivedStateFromProps
-
2、
getSnapshotBeforeUpdate# を使用できます。 ##: 更新前のスナップショットを取得する(更新前のデータを取得できます)
オブジェクトまたは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>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<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 = '新闻'+ (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.state.newsArr.map((n,index)=>{
return <div key={index} className="news">{n}</div>
})
}
</div>
)
}
}
ReactDOM.render(<NewsList/>,document.getElementById('test'))
</script>
</body>
</html>注:
UNSAFE_ を追加することもできます。
[関連する推奨事項:Redis ビデオ チュートリアル ]
以上がReact の古いライフサイクルと新しいライフサイクルの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。