React组件生命周期

[shly]

拷贝自 https://segmentfault.com/a/1190000012921279

创建阶段

特点： 该阶段的函数只执行一次

1. constructor() 1.1 获取props 1.2 初始化state
2. componentWillMount() 2.1 组件被挂载到页面之前调用，其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲染 2.2 无法获取页面中的DOM对象 2.3 可以调用 setState() 方法来改变状态值 2.4 发送ajax请求获取数据
3. render() 3.1 渲染组件到页面中，无法获取页面中的DOM对象 3.2 不要在render方法中调用 setState() 方法，否则会递归渲染。（状态改变会重新调用render()，render()又重新改变状态）
4. componentDidMount() 4.1 组件已经挂载到页面中 4.2 可以进行DOM操作，比如：获取到组件内部的DOM对象 4.3 可以发送请求获取数据 4.4 可以通过 setState() 修改状态的。.在这里修改状态会重新渲染

   运行阶段

   特点：该阶段的函数执行多次 每当组件的props或者state改变的时候，都会触发运行阶段的函数

5. componentWillReceiveProps 1.1 组件接受到新的props前触发这个方法 1.2 参数：当前组件props值 1.3 可以通过 this.props 获取到上一次的值 1.4 使用：若你需要响应属性的改变，可以通过对比this.props和nextProps并在该方法中使用this.setState()处理状态改变 注意：修改state不会触发该方法

   componentWillReceiveProps(nextProps) {
   console.warn('componentWillReceiveProps', nextProps)
   }

6. shouldComponentUpdate 作用：根据这个方法的返回值决定是否重新渲染组件，返回true重新渲染，否则不渲染 优势：通过某个条件渲染组件，降低组件渲染频率，提升组件性能 说明：如果返回值为false，那么，后续render()方法不会被调用 注意：这个方法必须返回布尔值！！！ 场景：根据随机数决定是否渲染组件
7. componentWillUpdate 作用：组件将要更新 参数：最新的属性和状态对象 注意：不能修改状态 否则会循环渲染
8. render 作用：重新渲染组件，与Mounting阶段的render是同一个函数 注意：这个函数能够执行多次，只要组件的属性或状态改变了，这个方法就会重新执行
9. componentDidUpdate 作用：组件已经被更新 参数：旧的属性和状态对象

   componentDidUpdate(prevProps, prevState) {
   console.warn('componentDidUpdate', prevProps, prevState)
   }

   卸载阶段

10. componentWillUnmount 1.1 在卸载组件的时候，执行清理工作。如清除定时器、清除componentDidMount创建的DOM对象等