記事ディレクトリ
ライフサイクルフック機能
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