reactjs - ReactJS 中的 componentWillUpdate 的具体用法是什么？

Question

我是 ReactJS 的新手，开始学习组件生命周期。现在我对 componentWillUpdate 和 componetDidUpdate 有疑问。我知道一旦您从 shouldComponentUpdate 函数发送 return true ，它就会调用 componentWillUpdate。一旦组件更新，componetDidUpdate 将调用。

我的问题是我们真的在 componetWillUpdate 函数中做了任何事情吗？我希望我们不能在该函数中使用 setState 。 componentWillUpdate函数的具体用途是什么？什么时候会有用呢？

Answer 1

componentWillUpdate 使您可以在组件接收新的 props 或状态之前控制对其进行操作。我一般用它来做动画。比方说，我想在删除 dom 之前将元素平滑地淡出 View 。这有帮助。

 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 制作动画或

• 调度事件来清理/设置您的商店。

  无尽的用例。