3、React运行阶段函数使用

componentWillReceiveProps: 父组件修改属性触发，可以修改新属性、修改状态，组件发生之前触发，在这个函数可以使用旧属性和新属性做比较，传送到组件之前做相应的处理

shouldComponentUpdate：返回false会阻止render调用，这个方法就是react询问开发者组件是否需要更新，这个函数可以用来优化性能

componentWillUpdate: 这个方法不能修改属性和状态
render：只能访问this.props 和 this.state ，只有一个顶层组件，不允许修改状态和DOM输出

componentDidUpdate：可以修改DOM

/* *  第一次加载页面后，看到只有调用render *  输入内容，就会看到其它函数都会按照顺序触发，原因就是父组件改变了子组件的属性，所以组件触发了5个运行中的函数 */
var count = 0var Hello = React.createClass({  
componentWillReceiveProps(){    
console.log('componentWillReceiveProps 1'); 
 },  
shouldComponentUpdate(){   
 console.log('shouldComponentUpdate 2');   
 return true  
}, 
 //这个函数一般用的不多，用一些日志打印，数据打印调试等  componentWillUpdate(){    
console.log('componentWillUpdate 3');  
},  
render(){    
console.log('render 4');    
return(      
<p>hello {this.props.name}</p>    
)  },  
componentDidUpdate(){    
console.log('componentDidUpdate 5');  
}
});

var Test = React.createClass({  
getInitialState(){    
return {      name: ''    }  
},  
handleChange(event){    
this.setState({      name: event.target.value    }) 
 }, 
 //渲染组件虚拟DOM  
render(){   
 return(      
  <div style={{textAlign:'center',fontSize:28}}>        
    <Hello name={this.state.name} />        
    <br/>        
    <input type="text" onChange={this.handleChange} style={{border:'1px solid #ccc'}}/>      
  </div>   
 )  
}
});

3、React运行阶段函数使用

推荐阅读更多精彩内容