React 生命周期简介

Posted web-panpan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 生命周期简介相关的知识,希望对你有一定的参考价值。

 
 React 中组件的生命周期会经历如下三个过程:装载过程、更新过程、卸载过程。
  • 装载过程:组件实例被创建和插入 DOM 树的过程;
  • 更新过程:组件被重新渲染的过程;
  • 卸载过程:组件从 DOM 树中删除的过程。

注意:装载过程与卸载过程在组件的生命周期中只会执行一次,更新过程可以多次执行。

在这三个过程中,分别依次调用了组件的生命周期函数。

React 组件生命周期总体流程图如下:

技术分享图片

一、装载过程

在这个过程中组件被创建,装载过程在组件的生命周期中只会被执行一次,调用的生命周期函数有:

  • defaultProps / getDefaultProps()
  • constructor() / getInitialState()
  • componentWillMount()
  • render()
  • conponentDidMount()

1、defaultProps:

组件类的一个静态属性,严格来讲这里不属于组件的生命周期的一部分,用于设置组件 props 的默认值。

  1. class Counter extends Component {
  2. static defaultProps = {
  3. count: 0,
  4. };
  5. render() {
  6. return (
  7. <div>当前值为:{this.props.count}</div>
  8. );
  9. }
  10. };

在调用组件时如果未设置 props.count,这样 props.count === undefined , 其将被设置默认为 0 :

 
  1. render() {
  2. return <Counter /> ; // 渲染后显示为 0
  3. }

如果调用组件时设置 props.count={null} , 这样渲染出来为 null :

 
  1. render() {
  2. return <Counter count={null} /> ; // 渲染后显示为 null
  3. }

他是在执行 React 的 createElement() 时去获取并赋值给 props 的,发生在组件实例化之前。

2、constructor

constructor 是 ES6 中 class 的构造函数,组件初始化调用的,所以它在组件生命周期函数中最先执行,这里主要做下面两件事情:

  • 初始化组件的 state。 它是组件初始化实例时最先执行的一个函数,因此在这里初始化 state ;
  • 方法的绑定。在 ES6 语法下,类的每个成员函数在执行时的 this 指向并不是和类的实例自动绑定的, 而构造函数中,this指向就是当前组件实例,为了方便将来调用,往往在构造函数中将组件实例的函数使用 bind(this) 这种方式,让当前实例中的函数调用时,this 始终是指向当前组件实例。
 
  1. class Counter extends Component {
  2. // 设置默认 props 的值
  3. static defaultProps = {
  4. count: 0,
  5. };
  6. // 构造函数 construcor
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. count: 0,
  11. };
  12. this.handleIncrease = this.handleIncrease.bind(this);
  13. }
  14. // 点击增加1
  15. handleIncrease(){
  16. let addCounter = this.state.counter;
  17. this.setState({
  18. counter: addCounter + 1
  19. })
  20. }
  21. render() {
  22. return (
  23. <div>
  24. 当前 props 值为:{this.props.count}
  25. <br />
  26. 当前 state 值为:{this.state.counter}
  27. <button onClick={this.handleIncrease}>点击增加</button>
  28. </div>
  29. );
  30. }
  31. };

3、componentWillMount

准备装载组件。它在组件实例化并初始化数据完成以后,组件 render() 之前调用。

官方文档说避免在该方法中引入任何的副作用或订阅,所以我们不建议在此生命周期函数内获取数据或修改 state; 如果有需求在 render() 前一定要修改 state,最好是在 constructor 里进行。

4、render

确定需要更新组件时调用 render,根据 diff 算法,渲染界面,生成需要更新的虚拟 DOM 数据。它并不做实际的渲染动作,只是返回了一个 JSX 描述结构,最终是由 React 来操作渲染过程。

render 函数是 React 组件中最重要的函数,一个组件中可以没有其他的生命周期函数,但一定要有 render 函数,如果一个组件没有东西可呈现,这个组件的 render 函数定义返回 null 或 false;

render() 是一个纯函数,所以在此声明周期内不能 setState。

5、componentDidMount

在组件装载后调用。这时已经生成了真实的 DOM 节点。

在这个函数中我们可以获取数据,改变状态,直接改变 DOM 等操作。

注意:并不是在调用 render() 函数之后立即调用了此函数,调用 render() 函数只是返回了一个 JSX 对象供 React 调用决定如何渲染,在 React 库把所有组件渲染完成再完成装载,这时才会依次调用各个组件的 componentDidMount 函数,表示这个组件已经挂载到 DOM 上了。

以上装载过程的生命周期函数只会执行一次

二、更新过程

更新过程中依次执行的生命周期函数有:

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

并不是每次更新都会依次调用以上全部函数,会根据不同的变化依次执行相关的函数。

1、componentWillReceiveProps(nextProps)

子组件的 props 发生改变及父组件的 render 函数被调用都会触发子组件的此函数。我们可以根据 nextProps 同步本地的 state,但最好要先比较 this.props 与 nextPorps 在做操作。 
本组件中通过 this.setState 方法触发的更新不会触发此函数。

2、shouldComponentUpdate(nextProps, nextState)

当组件接收到新的 props 和 state 改变的话,都会触发调用,返回 Boolean,默认返回的是 true。 
返回 true 继续进行下面的生命周期函数;返回 false 不更新组件。 
这个组件中不允许改变 state。 
我们可以利用此特点来优化项目,避免不必要的渲染,提高性能。

 
  1. shouldComponentUpdate(nextProps, nextState) {
  2. return this.props.count !== nextProps.count || this.state.counter !== nextState.counter;
  3. }

3、componentWillUpdate

在 shouldComponentUpdate 函数返回 true 时,会依次调用 componentWillUpdate、render 和 componentDidUpdate 函数。 
此函数内不可以改变 state,如果需要更新状态,请在 componentWillReceiveProps 中调用 this.setState()。

4、render 
这次 render() 和装载阶段的 render() 没有区别,只不过是在不同的阶段调用。

前一个 render 是在组件第一次加载时调用的,也就是初次渲染; 
后一个 render 是除去第一次之后调用的,也就是再渲染。

5、componentDidUpdate 
在组件再次渲染之后调用的。和 componentDidMount 一样,在这个函数中可以使用 this.refs 获取真实 DOM。

此函数内不可以改变 state

三、卸载阶段

componentWillUnmount

当组件要被从界面上移除的时候,就会调用。 
在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等。

代码 github 地址:https://github.com/mqp0713/react-lifestyle










以上是关于React 生命周期简介的主要内容,如果未能解决你的问题,请参考以下文章

React Native 中的 Android Activity 生命周期 - ViewPager

关于片段生命周期

调用 replace() 时片段的生命周期是啥?

react全家桶生命周期

Android片段生命周期:onResume调用了两次

在不存在的片段上调用片段生命周期和 onCreate 的问题