浏览代码时留意到react的两个生命周期函数componentDidMount,componentDidUpdate,于是又去搜索各大技术网站的资料想彻底弄明白react 的生命周期。
图片来源:https://juejin.im/post/5a062fb551882535cd4a4ce3
一直只知道react生命周期分为三个阶段,挂载,运行,销毁,不清楚每个函数之间能做些什么事情
componentWillMount:组件将要挂载,只调用一次,在初始化渲染之前立即执行。可以执行定时器和服务器获取数据的任务
render:渲染
componentDidMount:在初始化渲染之后执调用一次,页面有真正的DOM元素,可以对DOM进行操作
componentWillReceiveProps:在组件接受到新的属性时调用,在初始化渲染的时候不会调用该方法
shouldComponentUpdate(newProps, newState):初始化渲染时不会被执行,如果当新的props和state导致组件发生变化时,返回true 。默认为true,否则返回false。一般用该函数进行性能优化,当父组件数据更新时对自身组件进行更新渲染会导致他所有的子组件重新执行render,子组件再根据diff算法去判断是否需要更新渲染组件,无疑会导致很多性能浪费
componentWillUpdate(nextProps, nextState)在接收到新的props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。
componentDidUpdate()。已重新渲染完成,可以对dom进行操作
componentWillUnmount(),组件销毁时