ReactJSのcomponentWillUpdateの正確な使い方は何ですか？

Question

私はこのReactJSを初めて使用し、コンポーネントライフサイクルの学習を開始しました。今私はcomponentWillUpdateとcomponetDidUpdateについて疑問を抱いています。 shouldComponentUpdate機能からreturn trueを送信すると、それはcomponentWillUpdateと呼びます。コンポーネントが更新されると、componetDidUpdateが呼び出されます。

私の質問は、実際にcomponetWillUpdate機能で何かしていますか？その機能にsetStateも使用できないことを願っています。 componentWillUpdate関数の正確な使い方は何ですか？それはいつ有用ですか？

Answer 1

componentWillUpdateは、新しい小道具や状態を受け取る直前にコンポーネントを操作するように制御します。私は一般的にそれを使ってアニメーションを行います。 私は、DOMを削除する前に、ビューから要素をスムーズにフェードアウトしたいとします。これは役に立ちます。多くの多くの使用例

componentWillUpdate : function(newProps,newState){ 
    if(!newState.show){ 
     $(ReactDOM.findDOMNode(this.refs.elem)).css({'opacity':'1'}); 
    } 
    else{ 
     $(ReactDOM.findDOMNode(this.refs.elem)).css({'opacity':'0'});; 
    } 
}, 
componentDidUpdate : function(oldProps,oldState){ 
    if(this.state.show){ 
     $(ReactDOM.findDOMNode(this.refs.elem)).css({'opacity':'1'}); 
    } 
    else{ 
     $(ReactDOM.findDOMNode(this.refs.elem)).css({'opacity':'0'});; 
    } 
} 

https://jsfiddle.net/zupoj3x6/

一つの特にそれがアニメーションに来るとき。アイデアは、状態の変化を準備することです。準備は、多くの方法ですることができ

• あなたは、この特定の状態のため をレンダリングするために必要とされるかもしれない変数を設定することをお勧めします
あなたはdiv要素やへ

• ディスパッチイベントをアニメーション化する場合があります

• あなたの店をクリア/設定してください。

  エンドレスユースケース。