反応ライフサイクル関数とは何ですか?

反応ライフサイクル関数

Initialization

1.getDefaultProps()

注: getDefaultProps これ定義メソッドは、React.createClass メソッドを使用してコンポーネントを定義するときに使用されます。
es6 構文を使用している場合、たとえば、クラス コンポーネント名 extends React.Component を使用する場合は、
getDefaultProps. メソッドを使用しないでください。 props を定義しますが、アラームが発生しないように静的 propTypes = {} で定義する必要があります。

设置默认的props，也可以用dufaultProps设置组件的默认属性. ---》设置

2.getInitialState()

注: getDefaultProps との違いは、前者はデフォルトのプロパティ、後者は初期状態を設定します。es6 クラス構文を使用する場合、そのようなフック関数はありません。コンストラクターで直接 this.state を定義できます。この時点では、 this.props

3.componentWillMount

にアクセスできます。 注: これは、コンポーネントが初期化されるときにのみ呼び出されます。コンポーネントが更新されるときには呼び出されません。ライフサイクル全体で 1 回だけ呼び出され、この時点で状態を変更できます。

4. render()

注: 仮想 dom の作成、diff アルゴリズムの実行、dom ツリーの更新など、反応の最も重要なステップはすべてここで実行されます。この時点では、状態を変更することはできません。

5.componentDidMount()

注: コンポーネントがレンダリングされた後に呼び出されますが、呼び出されるのは 1 回だけです。ここでデータをリクエストできます

·Update

1.componentWillReceiveProps(nextProps)

注: これはコンポーネントの初期化時には呼び出されませんが、コンポーネントが受け入れたときに呼び出されます。新しい小道具。

2. shouldComponentUpdate(nextProps, nextState)

注: React のパフォーマンスの最適化は非常に重要な部分です。コンポーネントが新しい状態またはプロパティを受け入れるときに呼び出されます。比較の前後の 2 つのプロパティと状態が同じかどうかを設定できます。同じ場合は、同じ属性の状態が確実に同じものを生成するため、更新を防ぐために false を返します。 DOM ツリーなので、特に DOM 構造が複雑な場合にパフォーマンスを大幅に節約するために、新しい DOM ツリーを作成し、古い DOM ツリーを diff アルゴリズムと比較する必要はありません

3.componentWillUpdata(nextProps, nextState )

注: コンポーネント 初期化中には呼び出されません。コンポーネントが更新される直前にのみ呼び出されます。この時点で、state

4.render() を変更できます。

注: コンポーネントのレンダリング

5.componentDidUpdate( )

注: これは、コンポーネントの初期化時には呼び出されません。コンポーネントの更新が完了した後に呼び出されます。今度はdomノードが取得できます。

·Uninstall

componentWillUnmount()
注: コンポーネントがアンマウントされようとしているときに呼び出されます。この時点で一部のイベント リスナーとタイマーをクリアする必要があります。

推奨チュートリアル: 「react チュートリアル」

以上が反応ライフサイクル関数とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。