react 生命周期

之前在写react的时候，由于才接触这个框架，对于生命周期组件一般都只会用到基本的1-2个。最近抽空好好看了一下，大部分生命周期函数都是比较好理解的。

       这里主要说一下componentWillReceivePorps(nextProps)函数。

       解释：当

props

发生变化时执行，初始化

render

时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用

this.setState()

来更新你的组件状态，旧的属性还是可以通过

this.props

来获取,这里调用更新状态是安全的，并不会触发额外的

render

调用。

 
       比方说你的子组件通用props调用了父组件的数据A，那么当父组件里对A进行修改的时候，这个函数就会触发。

 
       代码截图：

 
        

 

         
这里words的初始值是123456789，那么当我们在父组件里修改words的值后就会触发componentWillReceivePorps，然后我们将新旧数据传递给pre和next，再将它显示出来，我们看看效果：

 
       修改前：

 
       


 
       修改后：

 
        


 
     这里特别提一下shouldComponentUpdate函数，什么用呢？

 
      这个方法在初始化

render

时不会执行，当props或者state发生变化时执行，并且是在

render

之前，当新的

props

或者

state

不需要更新组件时，返回false，将不会执行

render()

方法。其实就是主要用于优化性能的。

9b2f