sumakokima2 / resium-sample2

0 stars 0 forks source link

3-5. Component Lifecycle #17

Open sumakokima2 opened 5 years ago

sumakokima2 commented 5 years ago

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ この表が見やすいです。 今回は、これを和訳していくようにします

Mounting These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

constructor() static getDerivedStateFromProps() 戻り値とした Object の内容で state が更新されます。戻り値がない場合は state は更新されません。 render() componentDidMount()

Component の props または state が変更されたときに実行されます。
・Ajax を使ったデータフェッチを行う(二回目以降)
・DOM に対する処理(二回目以降)
・その他諸々

これらもメソッドは、コンポーネントのインスタンスが作成された時に、DOMに以下の順番で挿入されます。

Updating An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

static getDerivedStateFromProps() shouldComponentUpdate() 不要な再レンダリングを抑制してパフォーマンスの低下を防ぐ目的で利用されます。 render() getSnapshotBeforeUpdate() componentDidUpdate()

アップデートメソッドは、propsやstateが変更された時に呼び出されます。 このメソッドは、以下の順に、コンポーネントが再描写されたときに呼び出されます。

Unmounting This method is called when a component is being removed from the DOM:

componentWillUnmount()

このメソッドは、コンポーネントがDOMから削除された時に呼び出されます。

Error Handling These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

static getDerivedStateFromError() componentDidCatch()

これらのメソッドは、ライフサイクルメソッド内および、子コンポーネントのコンストラクタの描写中にエラーが発生した時に呼び出されます。

Other APIs Each component also provides some other APIs:

setState() forceUpdate()

各コンポーネントは、他のAPIを提供します。

Class Properties defaultProps displayName

Instance Properties props state