[React] LifeCycle API
ライフサイクルAPIは、コンポーネントがブラウザに表示されたとき、更新されたとき、消失したとき、この中間プロセスで任意の操作が実行されるときに使用されます.
ライフサイクルAPIは
コンストラクタを生成した後、propsをパラメータとして入力します. コンポーネントが作成されると、反応からロードされたコンポーネントが拡張され継承され、先に継承されたコンポーネントが呼び出され、その後、私たちがしたい作業が実行されます. コードを実行すると、コンソールウィンドウに「constructor」という文字列が出力されます.
App.jsを実行すると、上のコンソールウィンドウに「constructor」が出力され、「componentDidMount」が出力されます.
(コンポーネントDidMountを上部に配置するが、まず「constructor」を出力する) componentDidMountを使用してドームを操作する
App.js
ref=//refは
パラメータとして{ref=>this.myDiv=ref}/refを使用する関数を作成して設定します.
実行後、開発者ツールを表示すると、myDiv内の各要素の位置、サイズなどの値が表示されます.
propsをステータスに同期すると、オブジェクトに戻ります.次に返されるオブジェクトの値がステータスになります.
MyComponent.js
getDerivedStateFromPropsは静的に作成する必要があります.パラメータはnextPropsとprestateで、nextPropsは次の受信するprops値を取得し、prestateは変更前の現在の状態を取得します.
prevStateとNextPropsの値が異なる場合は、値をNextPropsの値に設定できます.
変更がない場合は、空に保持するかnullを返すだけです.
props値が変化したときの状態の変化を理解するために追加されたコード.
ボタンをクリックするとprops値が変化し、状態値も変化します.
shouldComponentUpdateを個別に実装しない場合、trueを返す対応する関数がデフォルト値に設定されます.特定の状況での再生を避けるためには、falseを返す条件を実現し、戻り値をfalseとして指定すればよい.
つまり,それを更新を阻止する関数とすればよい.
MyComponent.js Meボタンをクリックすると、propsの値が1増加し、同時に状態もpropsとともに増加します.ただし、propsが10の場合、shouldComponentUpdate関数はfalseを返しますので、何も変わっていないように見えますが、再度クリックするとpropsとstateの値は11になります.
コンポーネントを更新し、ブラウザのドームの前に呼び出された関数を反映します.
更新前のドーム状態に戻ります.
構成部品の更新後に呼び出される関数.
MyComponent.jsボタンをクリックすると、propsの値は以前の状態とは異なるため、コンソールウィンドウには値が変更されたことを示すメッセージが表示されます.
構成部品が不要で消えたときに発生する関数.
MyComponent.js
counterの値が10未満の場合、表示可能なコードを加えると、10を超えると消えてしまいます.(ComponentWillUnmountの実行)
(&&前の条件が満たされた場合&後の文法)
10回目のボタンをクリックすると、propsとstateが10の場合、propsとstateが画面から消え、コンポーネントWillUnmount関数がコンソールウィンドウにgoodbyeを出力します.
MyComponentなら.jsセクションでエラーが発生した場合、コンポーネントDidCatch関数は、エラーが発生したコンポーネントの親コンポーネントによって呼び出されます.
MyComponent.js missingは未定義のオブジェクトであるため、値は未定義です.こちらです.somettingという名前の値を検索しているためrender関数にエラーが発生し、reactionの場合ブラウザにエラーが発生します. App.js
errorはどのエラーが発生したかを知ることができ、infoはどこでエラーが発生したかを教えてくれます.
apiを使用すると、エラー・タイプをサーバに送信し、エラーが発生したときにエラー・メッセージを送信できます.
ライフサイクルAPIは
Mounting
mounchingとは、ブラウザにコンポーネントが表示されることを意味します.
関数のインストールconstructor:構成要素がブラウザに最初に表示されたときに最初に実行される関数.ここで、通常は、要素が有する状態または予め実行される必要がある動作を含む.getDerivedStateFromProps:propsが受信した値をステータスに同期するために使用されます.(この関数は、更新中にpropsが変化した場合にも実行されます.)render:どのドームが作成されるか、内部のタグがどの値を渡すかを定義します.componentDidMount:外部ライブラリを主に使用する場合、この関数は特定のドームにグラフを描く必要があります.あるいはajaxリクエストを処理する際に、その関数によって処理される.また、素子が現れても、数秒後に行いたいイベントを処理するために使用することができる.つまり、コンポーネントがブラウザに表示され、ある時点で操作したい場合に表示されます.
Updating
構成部品のpropsまたはstateが変更されたことを示します.getDerivedStateFromProps:カウントで使用される関数と同じです.propsの値をステータスに同期するにはshouldComponentUpdate:構成部品の更新のパフォーマンスを最適化します.既定では、親コンポーネントが更新されると、すべてのサブコンポーネントがレンダー関数を実行します.ただし、仮想ドームで学習したように、エレメントの変化だけをレンダリングする領域はレンダリングプロセスが速いという利点があり、親エレメントをレンダリングする際にサブエレメントをレンダリングすると、目が見えなくてもレンダラーとなり、仮想ドームに適用されます.親構成部品の変更を子構成部品に適用する必要がある場合、これは必要な機能と利点ですが、必要でない場合はshouldComponentUpdateを使用して不要な仮想ドームの更新を阻止できます.
この関数はtrueまたはfalse値を返すことができます.true値を返すと、レンダリングプロセスが表示されます.false値を返すと、レンダリングプロセスが表示されず、propsまたはstateの変化が反映されません.
つまり、shouldComponentUpdate関数は、仮想ドームに更新を適用するかどうかを決定することができます.getSnapshotBeforeUpdate:前のshouldComponentUpdate関数とrender関数を経て実行される関数.レンダリング後、ブラウザに反映される前に呼び出された関数の結果.レンダリング後、スクロール位置またはドームのサイズを辞書にインポートするときに使用する関数です.componentDidUpdate:上記の作業が完了した後、素子更新時に呼び出される関数.stateが変更されると、タスクの前のステータスと現在のステータス(ページ変更など)を設定できます.
Unmounting
ブラウザからコンポーネントが消えた時間を示します.componentWillUnmount:構成部品消失中に呼び出された関数.前のmountプロセスで呼び出された関数componentDidMount関数は、イベントをリスニングできることを示し、componentWillUnmountは、前に設定したイベントリスナーを削除する操作を実行できます.
LifeCycle APIコードで表示
constructor
App.jsimport React, { Component } from 'react';
class App extends Component {
constructor(props){ //1
super(props); //2
console.log('constructor');//3
}
render() {
return(
<div>안녕하세요</div>
);
}
}
constructor
App.js
import React, { Component } from 'react';
class App extends Component {
constructor(props){ //1
super(props); //2
console.log('constructor');//3
}
render() {
return(
<div>안녕하세요</div>
);
}
}componentDidMount
App.js
import React, { Component } from 'react';
class App extends Component {
constructor(props){ //1
super(props); //2
console.log('constructor'); //3
}
componentDidMount() {
console.log('componentDidMount'); //4
}
render() {
return(
<div>안녕하세요</div>
);
}
}(コンポーネントDidMountを上部に配置するが、まず「constructor」を出力する)
App.js
import React, { Component } from 'react';
class App extends Component {
constructor(props){ //1
super(props); //2
console.log('constructor'); //3
}
componentDidMount() {
console.log('componentDidMount'); //4
console.log('this.myDiv.getBoundingClientRect()'); //6
}
render() {
return(
<div ref={ref => this.myDiv = ref}>안녕하세요</div> //5
);
}
}ref=//refは
パラメータとして{ref=>this.myDiv=ref}/refを使用する関数を作成して設定します.
実行後、開発者ツールを表示すると、myDiv内の各要素の位置、サイズなどの値が表示されます.
getDerivedStateFromProps()
propsをステータスに同期すると、オブジェクトに戻ります.次に返されるオブジェクトの値がステータスになります.
MyComponent.js
import React, { Component } from 'react';
class MyComponent extends Component {
state = {
value: 0
};
static getDerivedStateFromProps(nextProps, prevState) { //7
if (prevState.value !== nextProps.value {
return {
value: nextProps.value //8
}
}
return null; //9
}
render() {
return (
<div>
<p>props: {this.props.value}</p>
<p>state: {this.state.value}</p>
</div>
);
}
}
export default MyComponent;import React, { Component } from 'react';
import MyComponent from './MyComponent';
class App extends Component {
state = {
counter: 1,
}
constructor(props){
super(props);
console.log('constructor');
}
componentDidMount() {
console.log('componentDidMount');
console.log('this.myDiv.getBoundingClientRect()');
}
handleClick = () => { //10
this.setState({
counter: this.state.counter + 1
});
}
render() {
return(
<div >
<MyComponent value={this.state.counter}/>
<button onClick={this.handleClick}>Click Me</button> //10
</div>
);
}
}getDerivedStateFromPropsは静的に作成する必要があります.パラメータはnextPropsとprestateで、nextPropsは次の受信するprops値を取得し、prestateは変更前の現在の状態を取得します.
prevStateとNextPropsの値が異なる場合は、値をNextPropsの値に設定できます.
変更がない場合は、空に保持するかnullを返すだけです.
props値が変化したときの状態の変化を理解するために追加されたコード.
ボタンをクリックするとprops値が変化し、状態値も変化します.
shouldComponentUpdate
shouldComponentUpdateを個別に実装しない場合、trueを返す対応する関数がデフォルト値に設定されます.特定の状況での再生を避けるためには、falseを返す条件を実現し、戻り値をfalseとして指定すればよい.
つまり,それを更新を阻止する関数とすればよい.
MyComponent.js
import React, { Component } from 'react';
class MyComponent extends Component {
state = {
value: 0
};
static getDerivedStateFromProps(nextProps, prevState) { //7
if (prevState.value !== nextProps.value {
return {
value: nextProps.value //8
}
}
return null; //9
}
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.value === 10) return false;
return true;
} //11
render() {
return (
<div>
<p>props: {this.props.value}</p>
<p>state: {this.state.value}</p>
</div>
);
}
}
export default MyComponent;getSnapshotBeforeUpdate()
コンポーネントを更新し、ブラウザのドームの前に呼び出された関数を反映します.
更新前のドーム状態に戻ります.
componentDidUpdate
構成部品の更新後に呼び出される関数.
componentDidUpdate(prevProps, prevState, snapshot) {} prevProps:更新されるアイテムMyComponent.js
import React, { Component } from 'react';
class MyComponent extends Component {
state = {
value: 0
};
static getDerivedStateFromProps(nextProps, prevState) { //7
if (prevState.value !== nextProps.value {
return {
value: nextProps.value //8
}
}
return null; //9
}
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.value === 10) return false;
return true;
} //11
componentDidUpdate(prevProps, prevState) {
if(this.props.value !== prevProps.value) {
colsole.log('value값이 바뀌었다!');
} //12
render() {
return (
<div>
<p>props: {this.props.value}</p>
<p>state: {this.state.value}</p>
</div>
);
}
}
export default MyComponent;componentWillUnmount
構成部品が不要で消えたときに発生する関数.
MyComponent.js
import React, { Component } from 'react';
class MyComponent extends Component {
state = {
value: 0
};
static getDerivedStateFromProps(nextProps, prevState) { //7
if (prevState.value !== nextProps.value {
return {
value: nextProps.value //8
}
}
return null; //9
}
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.value === 10) return false;
return true;
} //11
componentDidUpdate(prevProps, prevState) {
if(this.props.value !== prevProps.value) {
colsole.log('value값이 바뀌었다!');
}
}//12
componentWillUnmount() {
console.log('good bye');
} //14
render() {
return (
<div>
<p>props: {this.props.value}</p>
<p>state: {this.state.value}</p>
</div>
);
}
}
export default MyComponent;import React, { Component } from 'react';
import MyComponent from './MyComponent';
class App extends Component {
state = {
counter: 1,
}
constructor(props){
super(props);
console.log('constructor');
}
componentDidMount() {
console.log('componentDidMount');
console.log('this.myDiv.getBoundingClientRect()');
}
handleClick = () => { //10
this.setState({
counter: this.state.counter + 1
});
}
render() {
return(
<div>
{this.state.counter < 10 && <MyComponent value={this.state.counter}/> } //13
<button onClick={this.handleClick}>Click Me</button> //10
</div>
);
}
}counterの値が10未満の場合、表示可能なコードを加えると、10を超えると消えてしまいます.(ComponentWillUnmountの実行)
(&&前の条件が満たされた場合&後の文法)
10回目のボタンをクリックすると、propsとstateが10の場合、propsとstateが画面から消え、コンポーネントWillUnmount関数がコンソールウィンドウにgoodbyeを出力します.
コンポーネントDIDCatchは、構成部品にエラーが発生した場合に使用します。
MyComponentなら.jsセクションでエラーが発生した場合、コンポーネントDidCatch関数は、エラーが発生したコンポーネントの親コンポーネントによって呼び出されます.
MyComponent.js
import React, { Component } from 'react';
class MyComponent extends Component {
state = {
value: 0
};
static getDerivedStateFromProps(nextProps, prevState) { //7
if (prevState.value !== nextProps.value {
return {
value: nextProps.value //8
}
}
return null; //9
}
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.value === 10) return false;
return true;
} //11
componentDidUpdate(prevProps, prevState) {
if(this.props.value !== prevProps.value) {
colsole.log('value값이 바뀌었다!');
}
}//12
componentWillUnmount() {
console.log('good bye');
} //14
render() {
return (
<div>
{this.props.missing.something }//15
<p>props: {this.props.value}</p>
<p>props: {this.props.value}</p>
<p>state: {this.state.value}</p>
</div>
);
}
}
export default MyComponent;import React, { Component } from 'react';
import MyComponent from './MyComponent';
class App extends Component {
state = {
counter: 1,
}
constructor(props){
super(props);
console.log('constructor');
}
componentDidMount() {
console.log('componentDidMount');
console.log('this.myDiv.getBoundingClientRect()');
}
handleClick = () => { //10
this.setState({
counter: this.state.counter + 1
});
}
componentDidCatch(error, info) { //16
console.log(error);
console.log(info);
this.setState({
error: true,
});
//API를 통해 서버로 오류 내용 날려주기
//17
}
render() {
if (this.state.error) {
<div>에러발생</div>
}
return(
<div>
{this.state.counter < 10 && <MyComponent value={this.state.counter}/> } //13
<button onClick={this.handleClick}>Click Me</button> //10
</div>
);
}
}errorはどのエラーが発生したかを知ることができ、infoはどこでエラーが発生したかを教えてくれます.
apiを使用すると、エラー・タイプをサーバに送信し、エラーが発生したときにエラー・メッセージを送信できます.
Reference
この問題について([React] LifeCycle API), 我々は、より多くの情報をここで見つけました https://velog.io/@asas33/React-LifeCycle-APIテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol