生命周期相关函数
初始化的时候会执行4个钩子:constructor、componentWillMount、rende、componentDidMount
1、constructor 页面加载的时候执行 constructor (props) { super(props)//this this.state = { str: 'hello' } } 2、componentWillMount 在render之前 在完成首次渲染之前调用,此时仍可以修改组件的state。 3、render 页面加载执行 创建虚拟DOM 如果有子组件 则会先执行子组件的constroctor render 和componentDidMounter 再执行本身的componentDidMounter 4、componentDidMount 真实的DOM被渲染出来后调用 5、componentWillUnmount 节点删除之前执行
当组件被重新渲染的时候出发的钩子函数:只要修改组建的state 不管有没有引用state状态
都会重新shouldComponentUpdate(true继续执行 否则停止) 、componentWillUpdate 、render 、 componentDidUpdate
1、render() 2、componentDidUpdate //更新完成后被调用 componentDidUpdate(){ console.log('componentDidUpdate') } 3.componentWillUpdate //先与render()之前 componentWillUpdate(){ console.log('componentWillUpdate') } 4、shouldComponentUpdate //准备update 但不一定update 在update之前 直接返回true 或false 在componentWillUpdate之前,意义在于提高react性能 以及如果dom没变 就返回false 无需进行后面的的函数 以免不必要的浪费性能 shouldComponentUpdate() { console.log('shouldComponentUpdate') return false; } 5、componentWillReceviceProps //第二次被渲染时候才会被执行