万物皆有生命周期。 生命周期函数指在某一个时刻组件会自动执行的函数。 render constructor也可以理解为一个生命周期函数。在组件一创建的时刻,被自动的调用
1、initialzation 组件初始化的时候 (constructor的调用) 初始化数据 state and props 2、 Mounting 挂载 a. componentWillMount 在组件即将被挂载到页面的时刻自动执行 b.render 内容渲染到页面 c.componentDidMount 组件被挂载到页面之后自动执行
componentWillMount和componentDidMount只在组件挂载的时候执行。各执行一次。组件挂载之后render函数可能多次执行(当数据发生改变时)
3、Updation 组件更新流程(数据发生变化时)
props发生变化时: a. componentWillReceiveProps —>states变化中没有,二者唯一不同的差异 子组件将要接收属性 // 当一个组件从父组件接收了参数 // 只有父组件的render函数重新被执行了。子组件的componentWillReceiveProps函数就会执行 如果这个组件第一次存在于父组件中,不会执行 如果这个组件之前已经存在于父组件中,才会执行
b.shouldComponentUpdate(){} 确认更新组件吗 组件更新之前,会自动的执行. 返回一个布尔值,当为true时,组件才会更新。可用于react组件的更新的性能优化 c. componentWillUpdate(){} 组件将要更新之前它会自动执行,但是在shouldComponentUpdate之后被执行,如果shouldComponentUpdate 返回false,它将不会执行。返回true才会执行。 d.render 重新渲染 e.componentDidUpdate 组件更新完成。
state发生变化时 1.shouldComponentUpdate 2.componentWillUpdate 3.render 4.componentDidUpdate
4、 Unmounting // 组件卸载之后 componetWillUnmount 组件将要从页面中剔除的时候自动执行
生命周期函数的使用场景 1、当子组件不必要更新时,可用shouldComponentUpdate 返回false来提升代码性能 shouldComponentUpdate(nextProps, nextState) 接收nextProps和nextState 2、异步的获取数据 在conponemtDidMunt中进行异步数据获取 提升react代码性能的方法 1.在constructor中改变需要改变作用域的函数的作用域。
constructor (props){ super(props) this.handleClick = this.handleClick.bind(this) }2.在setState()中传入函数,setState是一个异步函数,它会把多次的数据改变合并成一次,降低虚拟dom的比对频率。 3.借助shouldComponetUpdate生命周期函数来避免组件不必要的虚拟dom比对和render渲染