React的生命周期到底是怎么一回事？

sutaking 发布于2019-08-22 11:08 / 2792人阅读

摘要：在中，组件基本由三个部分组成属性状态以及生命周期方法。在生命周期中是必须的，是渲染组件用的。返回就是紧接着以下的生命周期函数返回表示组件不需要重新渲染，不再执行任何生命周期函数包括。生命周期流程图原文地址

尽量全面详细的整理一下React的生命周期中的知识点。

组件

组件是独立的封装的可以复用的一个小部件，它是React的核心思想之一。通过划分组件，可以将一个页面划分成独立的多个可复用的组件，各个组件通过嵌套、组合形成一个完整的页面。

在React中，组件基本由三个部分组成：属性（props）、状态（state）以及生命周期方法。可以将组件简单地看作一个“状态机”，根据不同的state和props呈现不同的UI，通过与用户的交互实现不同的状态，然后重新渲染组件，UI可以跟随数据变化而变化。

创建组件

组件常分为两种：Class Component和Functional Component。

无状态组件

Functional Component也称为无状态组件，它多用于纯展示组件，这种组件只负责根据传入的props来渲染组件，而不涉及state状态管理。

在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等；这种通过多个简单然后合并成一个大应用的设计模式被提倡。

无状态组件可以通过函数形式或者ES6的箭头函数来创建：

// 函数
function HelloFunctional(props){
  return hello {props.name};
}

// ES6箭头函数
const HelloFunctional = (props) => (hello {props.name}
);

无状态组件有以下几个特点：

代码可读性更好

组件不会被实例化，渲染性能提升

无生命周期方法

只能输入props，同样的输入一定会有同样的输出

所以，在项目中如果不需要进行状态管理，应该尽量写成无状态组件的形式。

有状态组件

现在主流的创建有状态组件的形式是通过ES6的Class来创建，取代React.createClass：

Class HelloClass extends React.Component{
  constructor(){
    this.state = {
      name:"axuebin"
    }
  }
  render(){
    return (hello {this.state.name});
  }
}

这是最简洁的一个组件，它需要使用到内部状态state。

当组件需要使用内部状态时或者需要使用生命周期方法时就需要使用有状态组件。

组件的生命周期

React组件的生命周期可以分为挂载、渲染和卸载这几个阶段，当渲染后的组件更新后，会重新渲染组件，直到卸载。先分阶段来看看每个阶段有哪些生命周期函数。

挂载阶段（Mounting）

属于这个阶段的生命周期函数有：

constructor()

componentWillMount()

render()

componentDidMount()

constructor()

constructor() {
  super();
  this.state = {name: "axuebin"};
  this.handleClick = this.handleClick.bind(this); 
}

这个阶段就是组件的初始化，constructor()可以理解为组件的构造函数，从组件的类class实例化一个组件实例。这个函数是组件形成时就被调用的，是生命周期中最先执行的。

在constructor()函数内，首先必须执行super()，否则this.props将是未定义，会引发异常。

然后，如果有必要，可以进行：

state的初始化

方法的绑定

如果不需要这两步，可以直接省略constructor函数。

componentWillMount()

这个函数按照驼峰法的命名规则可以理解为“组件即将被挂载”，所以这个函数是组件首次渲染（render）前调用的。

在每次页面加载、刷新时，或者某个组件第一次展现时都会调用这个函数。通常地，我们推荐使用constructor()来替代。

注意：在这个函数中，不可以调用setState来修改状态。

render()

render() {
  return(
    hello {this.state.name} {this.props.age}
  )
}

render()在生命周期中是必须的，是渲染组件用的。

当这个函数被调用时，需要检查this.props和this.state并且返回一个元素（有且只有一个元素），这个元素可能是一个原生DOM元素，也有可能是另一个React组件。

可以在state或props状态为空时试着返回一个null或者false来声明不想渲染任何东西。

在这个函数中，不应该改变组件的状态，也就是不执行this.setState，需要保持render()函数的纯净。

在这个函数中，可以对props进行调用并组合，但不可修改。

componentDidMount()

componentDidMount() {
  this.setState({name:"xb"});
}

这个函数在组件加载渲染完成后立即调用，此时页面上已经渲染出真实的DOM了，可以在这个函数中访问到真实的DOM（可以通过this.refs来访问真实DOM）。

在这个阶段，还可以做一件事，可以修改state了！！！

而且，异步获取数据在这个阶段执行也是比较合理的，获取数据之后setState，然后重新渲染组件。

更新阶段（Updating）

属性或状态的改变会触发一次更新。当一个组件在被重新渲染时，这些方法将会被调用：

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

componentWillReceiveProps()

已加载的组件在props发生变化时调用，若需要更新状态，可能需要对比this.props和nextProps然后在该方法中使用this.setState来处理状态的改变。

需要注意的是，有些情况下，即使props未改变也会触发该函数，所以一定要先比较this.props和nextProps再做操作。

该函数只监听props的改变，this.setState不会触发这个函数。

componentWillReceiveProps(nextProps){
  if (this.props.color !== nextProps.color){
    this.setState({});
  }
}

shouldComponentUpdate()

这个函数只返回true或false，表示组件是否需要更新（重新渲染）。

返回true就是紧接着以下的生命周期函数；

返回false表示组件不需要重新渲染，不再执行任何生命周期函数（包括render）。

这个函数使用需谨慎，react官方文档中说道，在未来这个函数返回false可能仍然使得组件重新渲染。

componentWillUpdate()

这个函数看名字就和componentWillMount很像，它执行的阶段也很像。在接收到新的props或者state之后，这个函数就会在render前被调用。

同样的，在这个函数中不能使用this.setState()。如果需要更新状态，请在componentWillReceiveProps中调用this.setState()。

render()

又是一次的render。这和挂载阶段的render有什么区别呢？

在函数的性质上来说，两者毫无区别，只不过是在生命周期的不同阶段的调用。

前一个render是在组件第一次加载时调用的，也就是初次渲染，可以理解为mount；

后一个render是除去第一次之后调用的，也就是再渲染，re-render；

componentDidUpdate()

同样地，这个方法是在组件re-render之后调用的，该方法不会在初始化的时候调用。和componentDidMount一样，在这个函数中可以使用this.refs获取真实DOM。

还可以修改state哦，不过会导致组件再次re-render。

卸载阶段（Unmounting）

该方法将会在 component 从DOM中移除时调用

componentWillUnmount()

componentWillUnmount()

卸载阶段就很简单了，就这一个生命周期函数，在组件被卸载和销毁之前立刻调用。

在这个函数中，应该处理任何必要的清理工作，比如销毁定时器、取消网络请求、清除之前创建的相关DOM节点等。

生命周期流程图

原文地址：http://axuebin.com/blog/2017/...

私有云云服务器线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

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

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

参与知乎 live — 编写优雅的前端业务代码总结

摘要：知乎原地址编写优雅的前端业务代码前言当我们在写业务代码的时候，我们到底在写什么其实是对交互的一些处理。遍历，通过事件委派，將事件綁定在上。事件绑定滥用使用进行统一管理。写代码要说人话。知乎 live 原地址：编写优雅的前端业务代码前言当我们在写业务代码的时候，我们到底在写什么？其实是对交互的一些处理。所有的交互都是基于用户或者浏览器的一些行为来触发的，比如渲染页面，在页面onl...

CNZPH 2019-08-22 17:22 评论0 收藏0
全面了解 React 新功能: Suspense 和 Hooks

摘要：他们的应用是比较复杂的，组件树也是非常庞大，假设有一千个组件要渲染，每个耗费一千个就是由于是单线程的，这里都在努力的干活，一旦开始，中间就不会停。悄悄的, React v16.7 发布了。 React v16.7: No, This Is Not The One With Hooks. showImg(https://segmentfault.com/img/bVblq9L?w=97...

Baaaan 2019-08-23 14:14 评论0 收藏0
JS每日一题：react中类组件和函数式组件中有什么不同?

摘要：期中类组件和函数式组件中有什么不同在中创建组件的形式有三种纯函数式定义的无状态组件定义的组件定义的组件今天我们要聊的是纯函数式定义的无状态组件及类组件的到底有什么不同分别在什么场景下适合使用首先我们来看一下用上述方法如何来创建一个组件定义的 20190306期 react中类组件和函数式组件中有什么不同? 在react中创建组件的形式有三种纯函数式定义的无状态组件 React.cr...

Java_oldboy 2019-08-26 13:32 评论0 收藏0
一篇文章教你读懂UI绘制流程

摘要：最近有好多人问我没信心去深造了，找不到好的工作，其实我以一个他们进行回复，发现他们主要是内心比较浮躁，要知道技术行业永远缺少的是高手。至此整体绘制过程我们就已经非常清楚了。我门可以根据这种绘制的流程来操作自己的自定义组件。最近有好多人问我Android没信心去深造了，找不到好的工作，其实我以一个他们进行回复，发现他们主要是内心比较浮躁，要知道技术行业永远缺少的是高手。建议先阅读浅谈A...

ghnor 2019-08-16 12:30 评论0 收藏0
React setState源码实现理解

摘要：新的值回调函数。官方注解是给组件做个标记需要重新渲染，并且将可选的回调函数添加到函数列表中，这些函数将在重新渲染的时候执行。一共做了两件事一是通过执行方法来更新组件二是若方法传入了回调函数则将回调函数存入队列。 Q1 setState改变状态之后，不会立即更新state值。所以，如果改变state值，react是什么时候进行组件的更新呢？setState()到底做了一些什么呢？ A1 ...

xietao3 2019-08-23 18:21 评论0 收藏0