生命周期的理解this
class App extends Component{ constructor(){//1 console.log("constructor") //初始化属于组件的属性 super(); this.state = { num:1 } } changehandler(e){ this.state.num = e.target.value this.setState({ num:e.target.value }); } componentWillMount(){//2 //不推荐在此处渲染数据,可能会阻塞 console.log("componentWillMount") } componentDidMount(){//4 console.log("componentDidMount") } shouldComponentUpdate(){//1 问该不应更新return true;则就是1 console.log("shouldComponentUpdate") } componentWillUpdate(){//2 问shouldComponentUpdate该不应更新return true;则就是2(更新以前) console.log("componentWillUpdate") } componentDidUpdate(){//4问shouldComponentUpdate该不应更新return true;则就是4(更新以后) //数据改变的时候 console.log("componentDidUpdate") } render(){//3 问shouldComponentUpdate该不应更新return true;则就是3 return( <div> {this.state.num} <hr></hr> <input type='text' value={this.state.num} onChange={(e)=>{this.changehandler(e)}}></input> </div> ) } } export default App;
第一种
constructor,
componentWillMount
render
componentDidMount
第二种(有数据更新时)
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate以上是经常使用的生命周期执行顺序