Day04ライフサイクル/データリクエストへの対応

ライフサイクルフック機能

https://react.docschina.org/docs/react-component.html

古いバージョンのライフサイクル

1.マウント時(初期化フェーズ)

コンポーネントインスタンスが作成されてDOMに挿入されると、そのライフサイクル呼び出しシーケンスは次のようになります。

コンストラクター():ロード時に一度呼び出され、状態を初期化できます

componentWillMount():コンポーネントが読み込まれたときに呼び出されますが、コンポーネントの更新後には呼び出されません。ライフサイクル全体が一度だけ呼び出されます。この時点で状態を変更できます--- 以降のバージョンでは破棄されます

render():reactの最も重要なライフサイクルフック関数、仮想DOMの作成、diffアルゴリズムの実行、DOMツリーの更新を担当

componentDidMount():コンポーネントがレンダリングされた後に呼び出され、1回だけ呼び出されます—データを要求でき、DOM操作を実行できます

2.更新時(実行時フェーズ)

componentWillReceiveProps(nextProps):コンポーネントはロード時に呼び出されません。コンポーネントは、トライアルコール用の新しい小道具を受け取ります。通常、サブコンポーネントでデータを取得できます。後続のバージョンでは破棄されます

shouldComponentUpdate(nextProps、nextState):コンポーネントがレターの小道具と状態を受け取ったときに呼び出され、trueを返すとdomが更新され(diffアルゴリズムを使用して更新されます)、falseを返すと更新できなくなります—デフォルトの戻り値はtrueです----またはそれ以外の場合書き込み、戻り値を書き込む必要があります—反応のパフォーマンスを向上させるためのキー

componentWillUpdate(nextProps、nextState):コンポーネントが読み込まれるときに呼び出されず、コンポーネントが更新されようとしているときにのみ呼び出されます。この時点で状態を変更できます--- 以降のバージョンでは破棄されます

render():reactの最も重要なライフサイクルフック関数、仮想DOMの作成、diffアルゴリズムの実行、DOMツリーの更新を担当

componentDidUpdate():コンポーネントが読み込まれたときに呼び出されませんが、コンポーネントの更新が完了した後に呼び出すことができます— DOM操作、インスタンス化

3.アンインストール時(破壊段階)

componentWillUnmount():コンポーネントが読み込まれたときに呼び出されず、1回だけ呼び出されます

4.エラー処理

componentDidCatch(err、info):jsエラーがトリガーされます

新しいバージョンのライフサイクル

1.マウント時(初期化フェーズ)

ここに画像の説明を挿入
コンポーネントインスタンスが作成されてDOMに挿入されると、そのライフサイクル呼び出しシーケンスは次のようになります。

コンストラクター():ロード時に一度呼び出され、状態を初期化できます

static getDerivedStateFromProps(props、state):コンポーネントが再レンダリングされるたびに、コンポーネント構築に含まれます(仮想domの後、実際のdomがマウントされる前)、新しいプロップと状態を取得した後、新しいプロップを受信した後オブジェクトを新しい状態として返し、nullを返し、状態を更新する必要がないことを示します。componentDidUpdateを使用すると、componentWillReceivePropsのすべての使用をオーバーライドできます---- 通常は使用されません

render():reactの最も重要なライフサイクルフック関数、仮想DOMの作成、diffアルゴリズムの実行、DOMツリーの更新を担当

componentDidMount():コンポーネントがレンダリングされた後に呼び出され、1回だけ呼び出されます—データを要求でき、DOM操作を実行できます

2.更新時(実行時フェーズ)

ここに画像の説明を挿入

static getDerivedStateFromProps(props、state):コンポーネントが再レンダリングされるたびに、コンポーネント構築に含まれます(仮想domの後、実際のdomがマウントされる前)、新しいプロップと状態を取得した後、新しいプロップを受信した後オブジェクトを新しい状態として返し、nullを返し、状態を更新する必要がないことを示します。componentDidUpdateを使用すると、componentWillReceivePropsのすべての使用をオーバーライドできます---- 通常は使用されません

shouldComponentUpdate(nextProps、nextState):コンポーネントがレターの小道具と状態を受け取ったときに呼び出され、trueを返すとdomが更新され(diffアルゴリズムを使用して更新されます)、falseを返すと更新できなくなります—デフォルトの戻り値はtrueです----またはそれ以外の場合書き込み、戻り値を書き込む必要があります—反応のパフォーマンスを向上させるためのキー

render():reactの最も重要なライフサイクルフック関数、仮想DOMの作成、diffアルゴリズムの実行、DOMツリーの更新を担当

getSnapshotBeforeUpdate():トリガー時間:更新が発生すると、レンダリング関数の後、コンポーネントDOMがレンダリングされる前に、componentDidUpdateの3番目のパラメーターとして値を返します。componentDidUpdateを使用すると、componentWillUpdateのすべての使用法をカバーできます----通常は使用されません

componentDidUpdate():コンポーネントが読み込まれたときに呼び出されませんが、コンポーネントの更新が完了した後に呼び出すことができます— DOM操作、インスタンス化

3.アンインストール時(破壊段階)

ここに画像の説明を挿入

componentWillUnmount():コンポーネントが読み込まれたときに呼び出されず、1回だけ呼び出されます

4.エラー処理

componentDidCatch(err、info):jsエラーがトリガーされます

まとめ

React 16の新しいライフサイクルフック関数はcomponentWillMount、componentWillReceiveProps、componentWillUpdateを廃止します

静的getDerivedStateFromProps、getSnapshotBeforeUpdateを追加して、componentWillMount、componentWillReceiveProps、componentWillUpdateを置き換えます

React16バージョンでは、これら3つのライフサイクルフック関数は削除されませんでしたが、一緒に使用することはできません

React17バージョンは、非推奨のcomponentWillMount、componentWillReceiveProps、componentWillUpdateを完全に削除します

データリクエスト

  • Vueのデータリクエスト
    インターフェイスドキュメント
    http://nz1908.wudaxun.top/apidoc/を参照してください

フェッチリクエストメソッド

ここに画像の説明を挿入

Axiosリクエストメソッド

cnpm i axios -S
ここに画像の説明を挿入

axiosをカプセル化する

vueのようなaxiosのパッケージ化

Vueプロジェクトのsrc / apiフォルダーをコピーします

変更されたapi / request.js
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

UIライブラリを反応させる

PC antd

モバイルantd-mobile

https://ant.design/index-cn

UIライブラリと構成をインストールする

cnpm i antd -S
cnpm i babel-plugin-import -D

オリジナルの記事を48件公開 Likes0 Visits 1747

おすすめ

転載: blog.csdn.net/ZywOo_/article/details/105494285