Question

我是这个ReactJS的新手并开始学习组件生命周期。现在我怀疑componentWillUpdate和componetDidUpdate。我知道，一旦您从return true函数发送shouldComponentUpdate，它就会调用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设置动画或
派遣事件以清除/设置您的商店。

无休止的用例。

ReactJS中componentWillUpdate的确切用法是什么？

1 个答案: