React-生命周期
1.react-生命周期可以分为3大块:
(1).初试化:
- componentWillMount() ===>Vue生命周期中的 beforeMount()
实例创建完成,且state,props均初始化完成,可以进行访问。 - componentDidMount() ===> Vue生命周期中的mounted()
实例挂载渲染完成。
注释:初始化方法组件创建后均只会执行一次
(2).更新:
- componentWillReceiveProps(nextProps)
当组件接收到新的props时,调用。参数nextProps为接收到的新的props - shouldComponentUpdate(nextState,nextProps) (优化重要环节)
当组件接收到新的props,或state时,调用。参数nextState为新的state,参数nextProps为新的props。
注意:该方法必须要返回一个布尔值,否则报错
此时可以对新的state或props,旧的state或props进行比较,如果前后值,没有改变,则return false,停止更新。如果前后值发生了改变,那么就return true
进入更新的下一个生命周期。 - componentWillUpdate(nextState,nextProps)===>Vue生命周期中的beforeUpdate()
组件将要更新时调用,只有当shouldComponentUpdate返回true才会进入该周期。 并且因为此时,还未完成更新,所以可以在此对新的state或props拦截修改。 - componentDidUpdate()===>Vue生命周期中的updated()
更新完成,从新渲染完成。
(3).销毁
- componentWillUnmount()===>Vue生命周期中的destroy()
组件销毁后,立即调用。 (一些事件监听,定时器等在此时进行清除)
2 react实例从创建到销毁详细图解:
组件中可以利用
ReactDOM.unmountComponentAtNode(document.getElementById("app"));
销毁整个组件