React组件生命周期

mgckid 发布于2019-08-20 10:42 / 1694人阅读

摘要：组件生命周期此文章适合之前的版本，，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。每个生命周期阶段调用的钩子函数会略有不同。

React组件生命周期

此文章适合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。所有如果在React@17 发布之前，这篇文章还是适用的。
新的生命周期请看官网 blog 文章 React v16.3.0: New lifecycles and context API。

前言

组件会随着组件的 props 和 state 改变而发生变化，它的 DOM 也会有相应的变化。

一个组件就是一个状态机：对于特定的输入，它总会返回一致的输出。

React组件提供了生命周期的钩子函数去响应组件不同时刻的状态，组件的生命周期如下：

实例化

存在期

销毁期

钩子函数是我们重点关注的地方，下面来详细了解下生命周期下的钩子函数调用顺序和作用。每个生命周期阶段调用的钩子函数会略有不同。下面的图片或许对你有帮助。

可以查看 CodePen 在线 Demo React 生命周期

实例化

首次调用组件时，有以下方法会被调用（注意顺序，从上到下先后执行）：

getDefaultProps

这个方法是用来设置组件默认的 props，组件生命周期只会调用一次。但是只适合 React.createClass 直接创建的组件，使用 ES6/ES7 创建的这个方法不可使用， ES6/ES7 可以使用下面方式：

// es7
class Component {
  static defaultProps = {}
}
// 或者也可以在外面定义es6
// Compnent.defaultProps

getInitialState

设置state初始值，在这个方法中你已经可以访问到 this.props。 getInitialState 只适合 React.createClass 使用。使用 ES6 初始化state方法如下：

class Component extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      render: true,
    }
  }
}

或者这样

class Component extends React.Component{
  state = {
      render: true
  }
  render(){return false;}
}

componentWillMount

改方法会在组件首次渲染之前调用，这个是在 render 方法调用前可修改 state 的最后一次机会。这个方法很少用到。

render

这个方法以后大家都应该会很熟悉，JSX 通过这里，解析成对应的虚拟 DOM，渲染成最终效果。格式大致如下：

class Component extends React.Component{
  render(){
    return (
       
    )
  }
}

componentDidMount

这个方法在首次真实的 DOM 渲染后调用（仅此一次）当我们需要访问真实的 DOM 时，这个方法就经常用到。如何访问真实的 DOM 这里就不想说了。当我们需要请求外部接口数据，一般都在这里处理。

存在期

实例化后，当props或者state发生变化时，下面方法依次被调用：

componentWillReceiveProps

没当我们通过父组件更新子组件 props 时（这个也是唯一途径），这个方法就会被调用。

componentWillReceiveProps(nextProps){}

shouldComponentUpdate

字面意思，是否应该更新组件，默认返回 true。当返回 false 时，后期函数就不会调用，组件不会在次渲染。

shouldComponentUpdate(nextProps,nextState){}

componentWillUpdate

字面意思组件将会更新，props 和 state 改变后必调用。

render

跟实例化时的render一样，不多说

componentDidUpdate

这个方法在更新真实的 DOM 成功后调用，当我们需要访问真实的 DOM 时，这个方法就也经常用到。

销毁期

销毁阶段，只有一个函数被调用：

componentWillUnmount

没当组件使用完成，这个组件就必须从DOM中销毁，此时该方法就会被调用。当我们在组件中使用了 setInterval，那我们就需要在这个方法中调用 clearInterval。如果手动使用了 addEventListener 绑定了事件，也需要解绑事件。

参考文章

An Introduction to Life Cycle Events in React.js

云服务器 GPU云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80278.html

捋一捋React的生命周期

摘要：卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用，只跟实例的创建有关。前言：React 的版本从 v15 到 v16.3 ，再到v16.4，现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入，而最令人困惑的却是它的生命周期，新旧生命周期函数混杂在一起，难免会让许多新来者有很多困惑。所以这一篇我们来...

MobService 2019-08-23 15:20 评论0 收藏0
React.js 小书 Lesson20 - 更新阶段的组件生命周期

摘要：所以对于组件更新阶段的组件生命周期，我们简单提及并且提供一些资料给大家。这里为了知识的完整，补充关于更新阶段的组件生命周期你可以通过这个方法控制组件是否重新渲染。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。 React.js 小书 Lesson20 - 更新阶段的组件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 评论0 收藏0
React组件生命周期详解

摘要：组件生命周期构造方法是对类的默认方法，通过命令生成对象实例时自动调用该方法。该生命周期可以发起异步请求，并。后废弃该生命周期，可以在中完成设置渲染组件是一个组件必须定义的生命周期，用来渲染。该生命周期内可以进行。 React组件生命周期 constructor( ) 构造方法 constructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是...

learn_shifeng 2019-08-22 17:31 评论0 收藏0
React 深入系列４：组件的生命周期

摘要：因为是深入系列文章，本文不会仔细介绍每个生命周期方法的使用，而是会重点讲解在使用组件生命周期时，经常遇到的疑问和错误使用方式。父组件发生更新导致的组件更新，生命周期方法的调用情况同上所述。文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 React 深入系列4：组件的生命周期 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深...

warnerwu 2019-08-22 16:39 评论0 收藏0
不了解一下React16.3之后的新生命周期？

摘要：本文主要介绍之后的生命周期。该方法有两个参数和返回值为对象不需要返回整体，把需要改变的返回即可。必须有一个返回值，返回的数据类型可以有。此生命周期主要用于优化性能。最后，说明一点这三个生命周期在未来版本中会被废弃。 React16.3.0开始，生命周期进行了一些变化。本文主要介绍React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react组件的...

468122151 2019-08-23 15:41 评论0 收藏0