理解React组件的生命周期

18

React提供了很多钩子函数使我们可以在合适的时间、合适的节点更新组件的状态,这些钩子是生命周期函数,想要使用React,我们必须掌握在钩子中可以做什么,不可以做什么。

??首先大家想一下在哪里发送请求比较合适componentWillMountcomponentDidMountcomponentWillReceivePropscomponentDidUpdate?

reactlifecycle.png

组件3个阶段

组件的生命主要包括3个阶段: 挂载、更新、卸载,React 16开始还添加了错误处理。

挂载

组件被实例化并挂载在到dom树这一过程称为挂载

mounting.png

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

更新

当组件的属性或者状态改变时会重新渲染

updating.png

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

当执行this.forceUpdate时,shouldComponentUpdate将不会被触发

forceUpdate.png

卸载

当一个组件被移出Dom树时,组件就会被卸载

  • componentWillUnmount()

Error Handling

error-handleing.png

  • componentDidCatch()

constructor

当组件被实例化时,构造函数就被会最先执行。需要注意的是constructor的第一行必须是super(props)语句。

DO

  1. 设置组件的初始状态
  2. bind function

简单解释下bind function,当类的方法作为事件处理函数时,有可能会丢失this指向,有两种常见的解决方案:

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this); // 上面提到的bind function
使用箭头函数声明处理函数,个人比较推荐这种方案,代码简洁干净
handleClick = () => {}

DON’T

  1. 向后台发送请求进而更新组件状态
  2. 使用this.setState初始化

下图是强行在constructor中调用this.setState所发出的警告,在constructor中调用this.setState是没有任何作用的

setStateError.png

componentWillMount

它也只会在挂载过程中被调用一次,它的作用和constructor没有太大差异。有很多人在componentWillMount中请求后台数据,认为这样可以更早的得到数据,componentWillMout是在render函数执行前执行的,虽然请求是在第一次render之前发送的,但是返回并不能保证在render之前完成。React中不推荐在componentWillMount中发送异步请求?。

还有一点需要了解: 在componentWillMount中执行this.setState是不会触发二次渲染的。仔细思考一下,componentWillMount好像没啥卵用了。正所谓存在即合理,在服务端渲染的场景中componentDidMount是不会被执行的,因此可以在componnetWillMount中发生AJAX请求。

DO

  1. 使用this.setState更新组件状态
  2. 发送AJAX请求(服务端渲染场景中)

DON’T

  1. 发送AJAX请求(浏览器渲染场景中)

componentDidMount

此函数只会被调用一次既组件挂载完成时,在render函数调用之后。组件挂载完成表示它的子组件也全部被挂载完成。父组件render ->子组件render->子子组件render ... ...子子组件DidMount -> 子组件DidMount -> 父组件DidMount。React就是个递归的世界。componentDidMount函数中可以发生异步请求。

DO

  1. 发送AJAX请求

DON’T

  1. this.setState更新状态,因为会触发二次渲染

componentWillReceiveProps

当父组件re-render时该钩子函数就会执行,即使所传入的属性没有改变。这个钩子最大的用途:组件的部分状态是依赖于属性时做状态同步使用,在其中使用this.setState是不会触发额外的渲染的,this.setState的状态更新和props触发的render合并一次进行。要合理使用componentWillReceiveProps需记住做好条件判断:

componentWillReceiveProps(nextProps) {
  if(nextProps.myProp !== this.props.myProps) {
    // nextProps.myProp has a different value than our current prop
  }
}

请不要尝试在componentWillReceiveProps中发送异步请求(React Fiber后该钩子函数可能会被触发多次)?

DO

  1. 根据Props的更新同步组件状态

DON’T

  1. 发生异步请求

shouldComponentUpdate

shouldComponentUpdate主要是用来优化React应用性能的,水平没达到一定高度就不要去动它了。组件的状态或者属性改变时都会触发该函数,但只有在返回true时,组件才会被重新渲染。

DO or DON’T
什么也不要做就对了?

componentWillUpdate

当我们没有覆写componentShouldUpdate时,componentWillUpdate会在其之后立即执行。当shouldComponent被覆写过时,componentWillUpdate主要用来取代componentWillReceiveProps,用来同步Props至组件的部分状态。

DO

  1. 同步Props到组件状态

DON’T

  1. 发生异步请求

componentDidUpdate

它和componentDidMount的功能类似,componentDidMount发生于组件的首次render之后,而componentDidUpdate则是发生于组件状态及属性变化所导致的re-render之后。主要是用来请求后台数据。和componentWillReceiveProps类似,做相应处理时,需要做属性是否变更的判断,如下面代码所示。有趣的一点: componentWillReceiveProps接收的参数是nextProps, componentDidUpdate接收的是preProps。

componentDidUpdate(prevProps) {
  if(prevProps.myProps !== this.props.myProp) {
    // this.props.myProp has a different value
    // ...
  }
}

DO

  1. 异步请求

DON’T

  1. this.setState更新状态,会触发二次渲染

componentWillUnmount

当组件被卸载时被调用,在这里主要做一些清理操作,清理定时器、关闭socket、清除监听器等等

componentDidCatch

React的错误机制:子组件中产生的错误若并未被捕获或处理会抛给父组件,若上层也一直没有处理,错误将会被抛至最顶层导致浏览器白屏。
React16开始添加了一个新的特性错误处理。componentDidCatch十分特别,它只可以处理子组件中产生的、未处理的错误,能够捕获的错误类型有子组件render函数中产生的错误及生命周期函数中产生的非异步错误。用法:

//父组件或祖宗组件中实现
componentDidCatch(errorString, errorInfo) {
  this.setState({
    error: errorString
  });
  ErrorLoggingTool.log(errorInfo);
}
render() {
  if(this.state.error) return <ShowErrorMessage error={this.state.error} />
  return (
    // render normal component output
  );
}

在哪请求数据

??首先大家想一下在哪里发送请求比较合适componentWillMountcomponentDidMountcomponentWillReceivePropscomponentDidUpdate?

componentDidMountcomponentDidUpdate中。?

本文是阅读了Understanding React — Component life-cycle和官方文档后做的总结,也可以说是我抄来得?,欢迎大家批评指正。code
React系列课程之 入门

Understanding React — Component life-cycle
React.Component
component-lifecycle-methods

【开发环境推荐】Cloud Studio 是基于浏览器的集成式开发环境,支持绝大部分编程语言,包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等,无需下载安装程序,一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境,并且支持自定义域名指向,动态计算资源调整,可以完成各种应用的开发编译与部署。

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

清蒸不是水煮 · 2018-02-24

o.o 引用里的 “??” 是什么,emoji 吗

回复

0

两问号,引用使用的是不是不恰当,我只是想表示高亮

一歩 作者 · 2018-02-24
0

@一歩 o.o 原来如此,学习了,虽然感觉怪怪的

清蒸不是水煮 · 2018-02-24
webxing · 2018-03-09
0 error(s), 0 warning(s) ? ? ?

回复

QAQwow · 2018-09-10

componentWillMount不能作为发送请求的时期的原因我觉得还是没讲清楚啊

回复

0

componentWillMount发送ajax请求后,不能保证在render之前能返回数据,而且在React Fiber中componentWillMount可能会被执行多次。其实,React 16后,周期函数中will系列都不推荐使用了

happier · 2018-10-26
0

这个生命周期不要用了,即将被移除了。

Allan91 · 2018-10-30
前端小白 · 2月19日

所以真正能发送ajax的是在哪个生命周期吗??componentDidMount??

回复

载入中...