react生命周期

生命周期

componentWillMount(即将移除)

componentWillMount()是唯一一个在render()之前调用的生命周期方法。因此是在服务端渲染中唯一被调用的方法。
因为componentWillMount()将被删除,所以官方推荐使用constructor()替代该方法

render()

  • 在一个class 或者 function 组件中必须需要的

render() will not be invoked if shouldComponentUpdate() returns false.

constructor()

constructor(props)

react的构造器是在装载之前被调用的,当构造器实现了React.Component类,你应该在任意的生命之前调用super(props)

  • Otherwise, this.props will be undefined in the constructor, which can lead to bugs.
constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);// 改变handleClick的this的上下文
}

componentDidMount()

componentDidMount()

组件安装后立即调用componentDidMount()(插入到树中)。
当该方法被调用时候,React 已经渲染了组件并且将组件插入 DOM。因此如有有任何依赖于 DOM 的初始化,应该放在这里。

  • 在componentDidMount请求异步加载的数据
    有一种错觉,在componentWillMount请求的数据在render就能拿到,但其实render在willMount之后几乎是马上就被调用,根本等不到数据回来,同样需要render一次“加载中”的空数据状态,所以在didMount去取数据几乎不会产生影响。
  • 在componentDidMount中添加加事件监听
    react只能保证componentDidMount-componentWillUnmount成对出现,componentWillMount可以被打断或调用多次,因此无法保证事件监听能在unmount的时候被成功卸载,可能会引起内存泄露
  • 该方法中可以使用this.setState()方法,它将触发重新渲染。

componentWillReceiveProps(即将移除)

componentWillReceiveProps(nextProps)
  • 当组件接收到新的props,该方法会首先被调用,但是需要注意一点,即使props并没有发生改变,该方法也会被调用,所以使用该方法的时候要确保比较this.props和nextProps,避免不必要的渲染。
    componentWillReceiveProps将被移除,使用新的static getDerivedStateFromProps代替。

static getDerivedStateFromProps(新增)

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps内部不可以有副作用,因为现在是无论是state改变还是props改变,都会执行它。所以要谨慎使用。

shouldComponentUpdate

shouldComponentUpdate(nextState, nextProps)

有些时候需要避免不必要的渲染,可以使用该方法。返回false意味着 React 不执行componentWillUpdate(),render(),componentDidUpdate()。
该方法在初始化时候不执行。根据 React 文档,React 可能将shouldComponentUpdate视做提示而不是严格的根据它的返回结果决定是否执行,也就是说可能出现shouldComponentUpdate返回false,但是还是发生重新渲染。

componentWillUpdate(即将移除)

componentWillUpdate(nextProps, nextState)

该方法在被渲染前调用.shouldComponentUpdate在新的props进入组件或者state改变的时候调用。

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

该方法在 React 16.3 被添加并且它配合componentDidUpdate。该方法应该覆盖了旧方法shouldComponentUpdate的所有用例。
getSnapshotBeforeUpdate在元素被渲染并写入 DOM 之前调用,这样,你在 DOM 更新前捕获 DOM 信息(例如:滚动位置)。
应该返回一个snapshot值或null,无论返回什么,shouldComponentUpdate都可以接收到snapshot参数。
如果想要获得一个 list 或者一个聊天窗口中的滚动位置,可以在getSnapshotBeforeUpdate中取到这些信息。然后将滚动信息作为snapshot值返回。这允许在更新DOM后在componentDidUpdate中设置正确的滚动位置。

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.
当组件被更新时,将此作为在DOM上操作的机会。这也是一个进行网络请求的好地方,在生命周期中由于state的变化触发请求,在componentDidUpdate中进行。

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID); // 若props没有改变,网络请求可能就不需要了
  }
}

componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.


componentWillUnmount()

componentWillUnmount()

在卸载,销毁组件之前调用该方法。

static getDerivedStateFromProps(nextProps, prevState) {
    4. Updating state based on props // 根据props更新state
    7. Fetching external data when props change // 依赖props的数据请求
  }
  constructor() {
    1. Initializing state // 初始化
  }
  componentWillMount() {
    1. Initializing state // 初始化
  }
  componentDidMount() {
    2. Fetching external data // 请求数据
    3. Adding event listeners (or subscriptions) // 添加事件监听
  }
  componentWillReceiveProps() {
    4. Updating state based on props // 根据props更新state
    6. Side effects on props change
    7. Fetching external data when props change // 依赖props的数据请求
  }
  shouldComponentUpdate() {
  }
  componentWillUpdate(nextProps, nextState) {
     5. Invoking external callbacks
     8. Reading DOM properties before an update
    
  }
  render() {
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    8. Reading DOM properties before an update
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    5. Invoking external callbacks
    6. Side effects on props change
  }
  
  componentWillUnmount() {
  }

推荐阅读更多精彩内容

  • tips:很久没在简书更新文章了,欢迎大家逛逛我在github的博客点击查看 。 React v16.0前的生命周...
    aermin阅读 196,675评论 13 161
  • 组件的生命周期方法分以下三个阶段。 Mounting当创建组件的实例并将其插入到DOM中时,将调用这些方法:con...
    _八神光_阅读 702评论 0 0
  • 参考链接1.生命周期参考链接12.生命周期参考链接2 组件继承了react Component等相关基类,也就是继...
    嘻小佳阅读 258评论 0 0
  • 1. mounting阶段执行的生命周期函数 constructor()static getDerivedStat...
    静简明阅读 11,553评论 0 0
  • 很长时间没画了,练练基本功
    简刀刀阅读 293评论 0 1