ES6中的React生命周期详解

太长时间没写react了,有点生。重新捡起来练练手。

import React,{ Component } from 'react';

class Demo extends Component {
  constructor(props,context) {
      super(props,context)
      this.state = {
          //定义state
      }
  }
componentWillMount () {
}
componentDidMount () {
}
componentWillReceiveProps (nextProps) {
}
shouldComponentUpdate (nextProps,nextState) {
}
componentWillUpdate (nextProps,nextState) {
}
componentDidUpdate (prevProps,prevState) {
}
render () {
    return (
        <div></div>
    )
}
componentWillUnmount () {
}
}
export default Demo;

React生命周期主要包括三个阶段:初始化阶段、运行中阶段和销毁阶段,在React不同的生命周期里,会依次触发不同的钩子函数

一、初始化阶段

1、constructor()

constructor参数接受两个参数props,context。获取到父组件传下来的的props,context。如果你想在constructor构造函数内部(注意是内部哦,在组件其他地方是可以直接接收的)使用props或context,则需要传入,并传入super对象。

 constructor(props,context) {
  super(props,context)
  console.log(this.props,this.context) // 在内部可以使用props和context
}

也可以单独传一个,都不需要就不用传。

关于ES6的class constructor和super

只要组件存在constructor,就必需要写super,否则this指向会错误

constructor() {
  console.log(this) // 会报错,this指向错误
}

2、componentWillMount() 组件将要挂载

组件即将被渲染到页面之前触发,此时可以进行开启定时器、向服务器发送请求等操作

但是这里有一个问题

ajax请求能写在willmount里吗?
:答案是不推荐,别这么写

1.虽然有些情况下并不会出错,但是如果ajax请求过来的数据是空,那么会影响页面的渲染,可能看到的就是空白。
2.不利于服务端渲染,在同构的情况下,生命周期会到componentwillmount,这样使用ajax就会出错

3、render()

组件渲染

4、componentDidMount() 组件渲染完成

组件第一次渲染完成,此时dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会重新渲染

二、运行中阶段

5、componentWillReceiveProps (nextProps)

组件接收到属性时触发

在接受父组件改变后的props需要重新渲染组件时用到的比较多

6、 shouldComponentUpdate()

当组件接收到新属性,或者组件的状态发生改变时触发。组件首次渲染时并不会触发

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false
}
//该钩子函数可以接收到两个参数,新的属性和状态,返回true/false来控制组件是否需要更新。

一般我们通过该函数来优化性能:

一个React项目需要更新一个小组件时,很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法,形成新的虚拟DOM,再用diff算法对新旧虚拟DOM进行结构和属性的比较,决定组件是否需要重新渲染

无疑这样的操作会造成很多的性能浪费,所以我们开发者可以根据项目的业务逻辑,在shouldComponentUpdate()中加入条件判断,从而优化性能

例如React中的就提供了一个PureComponent的类,当我们的组件继承于它时,组件更新时就会默认先比较新旧属性和状态,从而决定组件是否更新。值得注意的是,PureComponent进行的是浅比较,所以组件状态或属性改变时,都需要返回一个新的对象或数组

7、 componentWillUpdate(nextProps,nextState)

组件即将被更新时触发

shouldComponentUpdate返回true以后,组件进入重新渲染的流程,进入componentWillUpdate,这里同样可以拿到nextProps和nextState

8、 componentDidUpdate()

组件被更新完成后触发。

react只有在第一次初始化成功才会进入componentDidmount,之后每次重新渲染后都会进入componentDidUpdate这个生命周期,这里可以拿到prevProps和prevState,即更新前的props和state。

三、销毁阶段

9、 componentWillUnmount()

组件被销毁时触发。这里我们可以进行一些清理操作,例如清理定时器,取消Redux的订阅事件等等。

发表评论

电子邮件地址不会被公开。 必填项已用*标注