React でのライフサイクルの使用方法の詳細な説明

今回はReactでのライフサイクルの使い方について詳しく説明します。 Reactでライフサイクルを使用する際の注意点について、実際の事例を見てみましょう。

ライフサイクル

Reactは仮想DOMを実際のDOMにレンダリングするプロセスです。このプロセスはコンポーネントのライフサイクルと呼ばれます。 React はこのサイクルを 3 つのステージに分割し、各ステージで 2 つの処理メソッド (Will と Did は発生前を指し、did は発生後を指します) を提供します。

• マウント: コンポーネントのレンダリングプロセス

• componentWillMount()

• componentDidMount()

• 更新: コンポーネントの更新プロセス

• componentWillReceiveProps(nextProps)

• shouldComponentUpdate(nextProps) 、nextState)

• componentWillUpdate(object nextProps, object nextState)

• componentDidUpdate(object prevProps, object prevState)

• アンマウント: コンポーネントの削除プロセス

• com ponentWill Unmount()

• この段階では、対応する Did メソッドはありません

マウント

は、最初のレンダリングまたはコンポーネントが DOM から削除された後の再レンダリングを指します。後者のシーンでは getDefaultProps は実行されません

実行順序

1. 。

   getDefaultProps

2. getInitialState

3. componentWillMount

4. render

5. componentDidMount

componentWillMount

このメソッドはレンダリング前に呼び出されます。これは、このメソッドでは実際の DOM 要素を取得できないことを意味します。
このメソッドは、初めてレンダリングする前と、状態が変化したときに再度レンダリングする前にトリガーされます。

componentDidMount

このメソッドはレンダリング後に呼び出されます。つまり、このメソッドは実際の DOM 要素を直接取得できます。
このメソッドは、最初のレンダリング後、および状態が変化したときに再度レンダリングされた後にトリガーされます。

var MountingComponent = React.createClass({
    componentWillMount: function(){
        console.log(this.refs.h1) // undefined
    },
    componentDidMount: function(){
        console.log(this.refs.h1) // h1 对象
    },
    render: function(){
        return <h1 ref="h1">Lifecycle-Mounting</h1>;
    }                
})
ReactDOM.render(<MountingComponent />, document.getElementById('p1'));

更新中

コンポーネントのプロパティまたは状態が変更されたときにトリガーされます

実行順序

1. componentWillReceiveProps

2. ShouldComponentUpdate

3. componentWillUpdate

4. レンダリング

5. コンポーネントDidUpdate

componentWillReceiveProps

コンポーネントが新しいプロパティを受け取るときに呼び出されます。このメソッドは、レンダリングの初期化時には呼び出されません。
このメソッドは 1 つのパラメーターを受け入れます
newProps: 更新された props 用です
注: props は手動で変更できません。通常のシナリオでは、現在のコンポーネントが子コンポーネントとして呼び出され、コンポーネントの props が親コンポーネント内で変更されます。

shouldComponentUpdate

コンポーネントのマウント その後、 setState が呼び出されるたびに shouldComponentUpdate が呼び出され、コンポーネントを再レンダリングする必要があるかどうかが判断されます。デフォルトで true を返すため、再レンダリングする必要があります。より複雑なアプリケーションでは、一部のデータ変更はインターフェイスの表示に影響を与えません。レンダリング効率を最適化するためにここで判断できます。
メソッドは 2 つのパラメータを受け取ります
newProps: 更新されたプロパティ
newState: 更新された状態
メソッドは boolen を返す必要があります。true が返された場合、後続のcomponentWillUpdate、render、およびcomponentDidUpdateが実行されます。それ以外の場合は実行されません。

componentWillUpdate

は、コンポーネントが新しい props または state を受け取ったがまだレンダリングされていないときに呼び出されます。初期化中には呼び出されません。
このメソッドは 2 つのパラメーターを受け入れます
nextProps: 更新されるプロパティ
nextState: 更新される状態

componentDidUpdate

は、コンポーネントが更新を完了した直後に呼び出されます。初期化中には呼び出されません。
このメソッドは 2 つのパラメータを受け取ります
prevProps: 更新前のプロパティ
nextState: 更新前の状態

var UpdatingComponent = React.createClass({
    getInitialState: function() {
        return {
            data:0
        };
    },           
    setNewNumber: function() {
        //当 state 发生改变的时候，state 对应的组件会重新挂载
        //会触发 componentWillUpdate、componentDidUpdate
        this.setState({data: this.state.data + 1})
    },
    //参数 newProps：已更新的 props
    componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECEIVE PROPS!', newProps)
    },        
    //参数 newProps：已更新的 props
    //参数 newState：已更新的 state  
    //必须要返回 boolen，true 则执行componentWillUpdate、render、componentDidUpdate。反之则不执行。
    shouldComponentUpdate: function(newProps, newState){
        console.log('shouldComponentUpdate',newProps, newState);
        return (newState.data > 0 && newState.data % 2 == 0);
    },                          
    //参数 nextProps：将要更新的 props
    //参数 nextState：将要更新的 state
    componentWillUpdate: function(nextProps, nextState){
        console.log(nextProps, nextState, this.refs.p1)
    },
    //参数 prevProps：更新前的 props
    //参数 nextState：更新前的 state                
    componentDidUpdate: function(prevProps, prevState){
        console.log(prevProps, prevState) 
    },
    render: function(){
        return (
            <p>
                <button onClick={this.setNewNumber}>INCREMENT</button>
                <h3>{this.state.data}</h3>
            </p>
        );
    }                
})
ReactDOM.render(<UpdatingComponent/>, document.getElementById('p2'));

Unmounting

在组件从 DOM 中移除的时候立刻被调用，这个阶段没有对应的 did 方法

componentWillUnmount

方法适用在父子组件的结构中，当某个条件符合的场景下，该子组件会被渲染

重新渲染的执行顺序

1. getInitialState

2. componentWillMount

3. render

4. componentDidMount

var ChildrenComponent = React.createClass({
    componentWillUnmount: function(){
        console.log('componentWillUnmount');
    },
    render: function(){
        return <h3>{this.props.myNumber}</h3>
    }
})
var UnmountingComponent = React.createClass({
    getInitialState: function() {
        return {
            data:0
        };
    },
    setNewNumber: function() {
        this.setState({data: this.state.data + 1})
    },
    render: function () {
        var content;
        //当条件不符合时 ChildrenComponent 会被移除，然后会触发方组件的 componentWillUnmount 方法
        //当条件重新符合时，会重新渲染组件 ChildrenComponent
        if(this.state.data % 2 == 0){
            content = <ChildrenComponent myNumber = {this.state.data}></ChildrenComponent>;
        } else {
            content = <h3>{this.state.data}</h3>;
        }
        return (
            <p>
                <button onClick = {this.setNewNumber}>INCREMENT</button>
                {content}
            </p>
        );
    }
})
ReactDOM.render(<UnmountingComponent/>, document.getElementById('p3'));

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

react实现选中li高亮步骤详解

PromiseA+的实现步骤详解

以上がReact でのライフサイクルの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。