react组件生命周期

组件生命周期

16.2 版本之前 - 老的生命周期
16.2 版本之后 - 删了之前三个生命周期, 换成了 新的两个生命周期
初始状态
constructor( )
constructor被调用是在组件准备要挂载的最一开始,所以此时组件尚未挂载到网页上。
componentWillMount( )
只会在装载之前调用一次,在 render 之前调用,你可以在这个方法里面调用 setState 改变状态,并且不会导致额外调用一次 render
componentWillMount方法的调用在constructor之后,在render之前,在这方法里的代码调用setState方法不会触发重渲染,所以它一般不会用来作加载数据之用,它也很少被使用到。
render( )

componentDidMount( )
componentDidMount

只会在装载完成之后调用一次,在 render 之后调用,从这里开始可以通过 ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。
componentDidMount方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载。此外,在这方法中调用setState方法,会触发重渲染。所以,官方设计这个方法就是用来加载外部数据用的,或处理其他的副作用代码。


更新状态
16.2 版本之后 - 删了之前三个生命周期, 换成了 新的两个生命周期
1 componentWillUpdata(){
console.log(“componentWillUpdate”)
}
2 componentDidUpdate(){
console.log("")

}
3componentWillReceiveProps(){

}
4shouldComponentUpdate( nextProps , nextState ){
//性能调优函数 新的状态和老的状态
//每次都会问更新不更新
if(this.state.myname !== nextState.myname){
return true
}
return false
}
新改的2个
1 getDerivedStateFromProps同步
getDerivedStateFromProps异步
getDerivedStateFromProps( nextProps,state ){
document.title = nextProps.mytitle
第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子),返回一个对象作为新的state,返回null则说明不需要在这里更新state
处理初级状态
}
2getSnapshotBeforeUpdate(结构之后,渲染之前)
取代的是componentWillUpdate,触发时间为update发生的时候,在render(render加载出了结构)(此时还是初始state没更新)
之后dom渲染之前返回一个值,作为componentDidUpdate的第三个参数
好处:记录的dom状态不可信,隔着didupdaet时间间隔太远

react中性能优化的方案
1,shouldComponentUpdate

控制组件自身或者子组件是否需要更新,尤其在子组件非常多的情况下,需要进行优化

2,PureComponenr(自动对比和vue机制)
会帮你比较新的props和旧的props,新的state和老的state(值相等,或者对象含有相同的属性,且属性值相等),决定shouldcomponentUpdate返回true或者false,从而决定要不要呼叫render function
注意:如果你的state和props永远都会变,那么PureComponent不会更新太快因为shallowEqual也需要花时间。

销毁(消除计数器和页面滚动值)
componentWillUnmount(){
“componentWillUnmount”,"clearInterval ,window.οnscrοll=null
}
nz班

发布了2 篇原创文章 · 获赞 0 · 访问量 17
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览