React の古いライフサイクルと新しいライフサイクルの違いは何ですか
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7665
15
1393
52
1205
24
91
11
React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法
Sep 28, 2023 am 10:48 AM
React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法、特定のコード例が必要です 今日の Web 開発環境では、フロントエンドとバックエンドの分離がトレンドになっています。フロントエンド コードとバックエンド コードを分離することで、開発作業がより柔軟かつ効率的になり、チームのコラボレーションが促進されます。この記事では、React を使用してフロントエンドとバックエンドの分離を実現し、それによって分離と独立したデプロイの目標を達成する方法を紹介します。まず、フロントエンドとバックエンドの分離とは何かを理解する必要があります。従来の Web 開発モデルでは、フロントエンドとバックエンドが結合されています。
React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法
Sep 27, 2023 am 11:09 AM
React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法 はじめに: インターネットの発展に伴い、Web アプリケーションのニーズはますます多様化および複雑化しています。使いやすさとパフォーマンスに対するユーザーの要件を満たすために、最新のテクノロジー スタックを使用してネットワーク アプリケーションを構築することがますます重要になっています。 React と Flask は、フロントエンドおよびバックエンド開発用の 2 つの非常に人気のあるフレームワークであり、うまく連携してシンプルで使いやすい Web アプリケーションを構築します。この記事では、React と Flask を活用する方法について詳しく説明します。
React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法
Sep 28, 2023 pm 08:24 PM
React と RabbitMQ を使用して信頼性の高いメッセージング アプリケーションを構築する方法 はじめに: 最新のアプリケーションは、リアルタイム更新やデータ同期などの機能を実現するために、信頼性の高いメッセージングをサポートする必要があります。 React はユーザー インターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージング ミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージング アプリケーションを構築する方法を紹介し、具体的なコード例を示します。 RabbitMQ の概要:
React Router ユーザーガイド: フロントエンドルーティング制御の実装方法
Sep 29, 2023 pm 05:45 PM
ReactRouter ユーザーガイド: フロントエンドルーティング制御の実装方法 シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティング ライブラリとして、ReactRouter は豊富な機能と使いやすい API を提供し、フロントエンド ルーティングの実装を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具体的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です
C++ 関数ポインターの破棄とライフサイクル管理にどのように対処するか?
Apr 17, 2024 pm 05:48 PM
C++ では、関数ポインターには適切な破棄とライフサイクル管理が必要です。これは、関数ポインタを手動で破棄し、メモリを解放することで実現できます。 std::unique_ptr や std::shared_ptr などのスマート ポインターを使用して、関数ポインターのライフ サイクルを自動的に管理します。関数ポインターをオブジェクトにバインドすると、オブジェクトのライフサイクルによって関数ポインターの破棄が管理されます。 GUI プログラミングでは、スマート ポインターを使用するか、オブジェクトにバインドすることで、コールバック関数が適切なタイミングで破棄され、メモリ リークや不整合が回避されます。
React と Apache Kafka を使用してリアルタイム データ処理アプリケーションを構築する方法
Sep 27, 2023 pm 02:25 PM
React と Apache Kafka を使用してリアルタイム データ処理アプリケーションを構築する方法 はじめに: ビッグ データとリアルタイム データ処理の台頭により、リアルタイム データ処理アプリケーションの構築が多くの開発者の追求となっています。人気のあるフロントエンド フレームワークである React と、高性能分散メッセージング システムである Apache Kafka を組み合わせることで、リアルタイム データ処理アプリケーションを構築できます。この記事では、React と Apache Kafka を使用してリアルタイム データ処理アプリケーションを構築する方法を紹介します。
PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには?
Mar 15, 2024 pm 05:48 PM
PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには?インターネット技術の継続的な発展に伴い、フロントエンド フレームワークは Web 開発において重要な役割を果たしています。 PHP、Vue、React は 3 つの代表的なフロントエンド フレームワークであり、それぞれに独自の特徴と利点があります。使用するフロントエンド フレームワークを選択するとき、開発者はプロジェクトのニーズ、チームのスキル、個人の好みに基づいて情報に基づいた決定を下す必要があります。この記事では、PHP、Vue、React の 3 つのフロントエンド フレームワークの特徴と用途を比較します。
Java フレームワークとフロントエンド React フレームワークの統合
Jun 01, 2024 pm 03:16 PM
Java フレームワークと React フレームワークの統合: 手順: バックエンド Java フレームワークをセットアップします。プロジェクト構造を作成します。ビルドツールを設定します。 React アプリケーションを作成します。 REST API エンドポイントを作成します。通信メカニズムを構成します。実際のケース (SpringBoot+React): Java コード: RESTfulAPI コントローラーを定義します。 React コード: API によって返されたデータを取得して表示します。
