React 生命周期的演变之路

时间  2019-12-07
标签 react 生命周期 演变 之路 栏目 React 繁體版
原文   原文链接

React 生命周期的演变

React 16.3以前的生命周期

  1. 组件初次装载
    • constructor()
    • componentWillMount()
    • render()
    • componentDidMount()
  2. 组件运行时
    • componentWillReceiveProps()
    • shouldComponentUpdate()
    • componentWillUpdate()
    • render()
    • componentDidUpdate()
  3. 组件卸载
    • componentWillUnmount()

为何要改变？

综上能够看出，React 16.3以前的生命周期很是完整，基本涵盖了组件生命的每个周期。为何要变呢？其实主要是性能问题，具体有如下几点缘由javascript

  1. js 是单线程语言，当组件树过于深时，每次组件更新耗时增长，阻断浏览器其它动做，造成卡顿
  2. 部分经验不足的程序员，错误的使用生命周期，致使程序异常 例如：在componentWillMount 中放置事件绑定和异步请求函数，在服务端渲染时，组件不会触发componentWillUnmount 致使的重复请求，重复监听，内存溢出等。
  3. 主要缘由React将在17后，启用React Fiber 开始异步渲染。

什么是React Fiber？

React Fiber是个什么东西呢？官方的一句话解释是 React Fiber是对核心算法的一次从新实现 。这么说彷佛太虚无缥缈，因此仍是要详细说一下。html

首先了解React Fiber以前的局限

在现有React中，更新过程是同步的，这可能会致使性能问题。java

当React决定要加载或者更新组件树时，会作不少事，好比调用各个组件的生命周期函数，计算和比对Virtual DOM，最后更新DOM树，这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，那React就以不破楼兰终不还的气概，一气呵成运行到底，中途毫不停歇。react

表面上看，这样的设计也是挺合理的，由于更新过程不会有任何I/O操做嘛，彻底是CPU计算，因此无需异步操做，的确只要一路狂奔就好了，可是，当组件树比较庞大的时候，问题就来了。程序员

假如更新一个组件须要1毫秒，若是有200个组件要更新，那就须要200毫秒，在这200毫秒的更新过程当中，浏览器那个惟一的主线程都在专心运行更新操做，无暇去作任何其余的事情。想象一下，在这200毫秒内，用户往一个input元素中输入点什么，敲击键盘也不会得到响应，由于渲染输入按键结果也是浏览器主线程的工做，可是浏览器主线程被React占着呢，抽不出空，最后的结果就是用户敲了按键看不到反应，等React更新过程结束以后，咔咔咔那些按键一会儿出如今input元素里了。ajax

这就是所谓的界面卡顿，很很差的用户体验。算法

现有的React版本，当组件树很大的时候就会出现这种问题，由于更新过程是同步地一层组件套一层组件，逐渐深刻的过程，在更新完全部组件以前不中止，函数的调用栈就像下图这样，调用得很深，并且很长时间不会返回。 redux

由于JavaScript单线程的特色，每一个同步任务不能耗时太长，否则就会让程序不会对其余输入做出相应，React的更新过程就是犯了这个禁忌，而React Fiber就是要改变现状。

React Fiber的方式

破解JavaScript中同步操做时间过长的方法其实很简单——分片。数组

把一个耗时长的任务分红不少小片，每个小片的运行时间很短，虽然总时间依然很长，可是在每一个小片执行完以后，都给其余任务一个执行的机会，这样惟一的线程就不会被独占，其余任务依然有运行的机会。浏览器

React Fiber把更新过程碎片化，执行过程以下面的图所示，每执行完一段更新过程，就把控制权交还给React负责任务协调的模块，看看有没有其余紧急任务要作，若是没有就继续去更新，若是有紧急任务，那就去作紧急任务。

维护每个分片的数据结构，就是Fiber。

有了分片以后，更新过程的调用栈以下图所示，中间每个波谷表明深刻某个分片的执行过程，每一个波峰就是一个分片执行结束交还控制权的时机。

具体可看下面文章 React Fiber

能够看出在React Fiber使用后，异步的渲染对组件的生命周期产生了必定影响，由于每一次组件更新再也不是按照以前整个流程同步更新下来，而是划分红了两部分。render以前和render以后

render以前
  • constructor()
  • componentWillMount()
  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
render以后
  • componentDidMount()
  • componentDidUpdate()
  • componentWillUnmount()

组件在render()以后，界面已经渲染完成，因此不受影响，主要受影响的是render()以前的生命周期函数，咱们来具体看一下render()以前的几个函数。

constructor()

组件的构造函数，整个生命周期内只调用一次，因此不受影响。

componentWillMount()

组件初次加载时，在render()以前调用，在使用Fiber后，有可能执行后不继续执行render()函数，在下次时间片时又被调用，因此可能一次渲染屡次调用的状况。 coumponentWillReceiveProps() componentWillUpdate() 同理。

componentWillUpdate()

用于组件的性能优化，函数返回 true 和 false 。由于该函数只用于判断是否继续执行render()函数，对于render()最终是否执行，或是由于Fiber的异步缘由屡次调用都不会产生影响。

因此主要受影响的就是 componentWillMount() coumponentWillReceiveProps() componentWillUpdate() 这3个函数，React 官方也是准备在后续17版本中移除这3个生命周期函数，不过官方也出了2个新的生命周期函数用来替代缺乏的功能。这两个函数就是：

  • getDeriverdStateFromProps()
  • getSnapshotBeforeUpdate()

在react 16.3以后，生命周期图就变成了这样

咱们再来看新增的这两个生命周期函数：

getDerivedStateFromProps是一个静态函数，因此函数体内不能访问this，简单说，就是应该一个纯函数，纯函数是一个好东西啊，输出彻底由输入决定。

static getDerivedStateFromProps(nextProps, prevState) {
    // 这一辈子命周期方法是静态的，它在组件实例化或接收到新的 props 时被触发
    // 经过 nextProps, prevState 进行数据处理，如需更新组件state则返回一个对象，
    // 则将被用于更新 state ；如不需更新则返回一个 null ，则不触发 state 的更新

    // 配合 `componentDidUpdate` 使用，这一方法能够取代 `componentWillReceiveProps`
  }

复制代码

getSnapshotBeforeUpdate(prevProps, prevState) 从图中能够看出这个函数是在render以后调用的，按道理来讲，咱们对于这以后的操做均可以直接写在componentDidUpdate里面，后来仔细了解了一下，发现这个生命周期函数是在render和浏览器真正渲染的中间，具体以下图：

对于这个函数如何使用，其实我也找不到合适的例子来说解，咱们暂时能够看一下官方给的示例： 

class ScrollingList extends React.Component {
  listRef = null;

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      return (
        this.listRef.scrollHeight - this.listRef.scrollTop
      );
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      this.listRef.scrollTop =
        this.listRef.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.setListRef}> {/* ...contents... */} </div>
    );
  }

  setListRef = ref => {
    this.listRef = ref;
  };
}
复制代码

在这个示例中，利用getSnapshotBeforeUpdate ,在列表添加新行以后才调整列表的滚动位置。

React Hook

React 组件的两种形态

  • Class(有状态)组件
  • Function(无状态)组件

在一个组件不复杂时，咱们一般用函数式组件来编写，可是常常随着业务的变化，组件内部须要有状态维护，因此常常在又把无状态组件改为有状态组件。能不能让函数式组件也能够有状态呢？这个时候就出现了Hook，可是Hook远远不止这些，按照React官方的意见，但愿你们尽可能用函数式组件去替代Class组件，因此Hook就要可以承担Class组件中生命周期函数的做用。

为何引入Hooks?

react官方给出的动机是用来解决长时间使用和维护react过程当中遇到的一些难以免的问题。好比：

  1. 难以重用和共享组件中的与状态相关的逻辑
  2. 逻辑复杂的组件难以开发与维护，当咱们的组件须要处理多个互不相关的 local state 时，每一个生命周期函数中可能会包含着各类互不相关的逻辑在里面。
  3. 类组件中的this增长学习成本，类组件在基于现有工具的优化上存在些许问题。
  4. 因为业务变更，函数组件不得不改成类组件等等。

在进一步了解以前，咱们须要先快速的了解一些基本的 Hooks 的用法。

一个最简单的Hooks

首先让咱们看一下一个简单的有状态组件：

class Example extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   count: 0
  };
 }

 render() {
  return (
   <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div>
  );
 }
}
复制代码

咱们再来看一下使用hooks后的版本：

import { useState } from 'react';

function Example() {
 const [count, setCount] = useState(0);

 return (
  <div>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>
    Click me
   </button>
  </div>
 );
}
复制代码

是否是简单多了！能够看到，Example变成了一个函数，但这个函数却有本身的状态（count），同时它还能够更新本身的状态（setCount）。这个函数之因此这么了不起，就是由于它注入了一个hook--useState，就是这个hook让咱们的函数变成了一个有状态的函数。

能够看出hook彻底增强了函数式组件的能力，在不增长函数式组件更多复杂性时，变得更增强大。Hooks出现的目标就是想让咱们更多的去使用函数式组件。咱们能够在babel中观察两种写法编译出来的结果。

上面只是举了一个简单的用法，hook的能力远不止于此。

什么是State Hooks？

回到一开始咱们用的例子，咱们分解来看到底state hooks作了什么：

import { useState } from 'react';

function Example() {
 const [count, setCount] = useState(0);

 return (
  <div>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>
    Click me
   </button>
  </div>
 );
}
复制代码

声明一个状态变量

import { useState } from 'react';

function Example() {
 const [count, setCount] = useState(0);

复制代码

useState是react自带的一个hook函数，它的做用就是用来声明状态变量。useState这个函数接收的参数是咱们的状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是当前当前的状态值，第[1]项是能够改变状态值的方法函数。

因此咱们作的事情其实就是，声明了一个状态变量count，把它的初始值设为0，同时提供了一个能够更改count的函数setCount。

更新状态

<button onClick={() => setCount(count + 1)}>
  Click me
 </button>
复制代码

当用户点击按钮时，咱们调用setCount函数，这个函数接收的参数是修改过的新状态值。接下来的事情就交给react了，react将会从新渲染咱们的Example组件，而且使用的是更新后的新的状态，即count=1。这里咱们要停下来思考一下，Example本质上也是一个普通的函数，为何它能够记住以前的状态？

一个相当重要的问题

这里咱们就发现了问题，一般来讲咱们在一个函数中声明的变量，当函数运行完成后，这个变量也就销毁了（这里咱们先不考虑闭包等状况），好比考虑下面的例子：

function add(n) {
  const result = 0;
  return result + 1;
}

add(1); //1
add(1); //1
复制代码

无论咱们反复调用add函数多少次，结果都是1。由于每一次咱们调用add时，result变量都是从初始值0开始的。那为何上面的Example函数每次执行的时候，都是拿的上一次执行完的状态值做为初始值？答案是：是react帮咱们记住的。至于react是用什么机制记住的，咱们能够再思考一下。

假如一个组件有多个状态值怎么办？

首先，useState是能够屡次调用的，因此咱们彻底能够这样写：

function ExampleWithManyStates() {
 const [age, setAge] = useState(42);
 const [fruit, setFruit] = useState('banana');
 const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
复制代码

其次，useState接收的初始值没有规定必定要是string/number/boolean这种简单数据类型，它彻底能够接收对象或者数组做为参数。惟一须要注意的点是，以前咱们的this.setState作的是合并状态后返回一个新状态，而useState是直接替换老状态后返回新状态。最后，react也给咱们提供了一个useReducer的hook，若是你更喜欢redux式的状态管理方案的话。

从ExampleWithManyStates函数咱们能够看到，useState不管调用多少次，相互之间是独立的。这一点相当重要。为何这么说呢？

其实咱们看hook的“形态”，有点相似以前被官方否认掉的Mixins这种方案，都是提供一种“插拔式的功能注入”的能力。而mixins之因此被否认，是由于Mixins机制是让多个Mixins共享一个对象的数据空间，这样就很难确保不一样Mixins依赖的状态不发生冲突。

而如今咱们的hook，一方面它是直接用在function当中，而不是class；另外一方面每个hook都是相互独立的，不一样组件调用同一个hook也能保证各自状态的独立性。这就是二者的本质区别了。

react是怎么保证多个useState的相互独立的？

仍是看上面给出的ExampleWithManyStates例子，咱们调用了三次useState，每次咱们传的参数只是一个值（如42，‘banana'），咱们根本没有告诉react这些值对应的key是哪一个，那react是怎么保证这三个useState找到它对应的state呢？

答案是，react是根据useState出现的顺序来定的。咱们具体来看一下

//第一次渲染
 useState(42); //将age初始化为42
 useState('banana'); //将fruit初始化为banana
 useState([{ text: 'Learn Hooks' }]); //...

 //第二次渲染
 useState(42); //读取状态变量age的值（这时候传的参数42直接被忽略）
 useState('banana'); //读取状态变量fruit的值（这时候传的参数banana直接被忽略）
 useState([{ text: 'Learn Hooks' }]); //...

复制代码

假如咱们改一下代码：

let showFruit = true;
function ExampleWithManyStates() {
 const [age, setAge] = useState(42);
 
 if(showFruit) {
  const [fruit, setFruit] = useState('banana');
  showFruit = false;
 }
 
 const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
复制代码

这样一来，

//第一次渲染
 useState(42); //将age初始化为42
 useState('banana'); //将fruit初始化为banana
 useState([{ text: 'Learn Hooks' }]); //...

 //第二次渲染
 useState(42); //读取状态变量age的值（这时候传的参数42直接被忽略）
 // useState('banana'); 
 useState([{ text: 'Learn Hooks' }]); //读取到的倒是状态变量fruit的值，致使报错
复制代码

鉴于此，react规定咱们必须把hooks写在函数的最外层，不能写在ifelse等条件语句当中，来确保hooks的执行顺序一致。

什么是Effect Hooks?

咱们在上一节的例子中增长一个新功能：

import { useState, useEffect } from 'react';

function Example() {
 const [count, setCount] = useState(0);

 // 相似于componentDidMount 和 componentDidUpdate:
 useEffect(() => {
  // 更新文档的标题
  document.title = `You clicked ${count} times`;
 });

 return (
  <div>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>
    Click me
   </button>
  </div>
 );
}
复制代码

咱们对比着看一下，若是没有hooks，咱们会怎么写？

class Example extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   count: 0
  };
 }

 componentDidMount() {
  document.title = `You clicked ${this.state.count} times`;
 }

 componentDidUpdate() {
  document.title = `You clicked ${this.state.count} times`;
 }

 render() {
  return (
   <div>
    <p>You clicked {this.state.count} times</p>
    <button onClick={() => this.setState({ count: this.state.count + 1 })}>
     Click me
    </button>
   </div>
  );
 }
}

复制代码

咱们写的有状态组件，一般会产生不少的反作用（side effect），好比发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。咱们以前都把这些反作用的函数写在生命周期函数钩子里，好比componentDidMount，componentDidUpdate和componentWillUnmount。而如今的useEffect就至关与这些声明周期函数钩子的集合体。它以一抵三。

同时，因为前文所说hooks能够反复屡次使用，相互独立。因此咱们合理的作法是，给每个反作用一个单独的useEffect钩子。这样一来，这些反作用再也不一股脑堆在生命周期钩子里，代码变得更加清晰。

useEffect作了什么？

咱们再梳理一遍下面代码的逻辑：

function Example() {
 const [count, setCount] = useState(0);

 useEffect(() => {
  document.title = `You clicked ${count} times`;
 });

复制代码

首先，咱们声明了一个状态变量count，将它的初始值设为0。而后咱们告诉react，咱们的这个组件有一个反作用。咱们给useEffecthook传了一个匿名函数，这个匿名函数就是咱们的反作用。在这个例子里，咱们的反作用是调用browser API来修改文档标题。当react要渲染咱们的组件时，它会先记住咱们用到的反作用。等react更新了DOM以后，它再依次执行咱们定义的反作用函数。

这里要注意几点：

第一，react首次渲染和以后的每次渲染都会调用一遍传给useEffect的函数。而以前咱们要用两个声明周期函数来分别表示首次渲染（componentDidMount），和以后的更新致使的从新渲染（componentDidUpdate）。

第二，useEffect中定义的反作用函数的执行不会阻碍浏览器更新视图，也就是说这些函数是异步执行的，而以前的componentDidMount或componentDidUpdate中的代码则是同步执行的。这种安排对大多数反作用说都是合理的，但有的状况除外，好比咱们有时候须要先根据DOM计算出某个元素的尺寸再从新渲染，这时候咱们但愿此次从新渲染是同步发生的，也就是说它会在浏览器真的去绘制这个页面前发生。

useEffect怎么解绑一些反作用

这种场景很常见，当咱们在componentDidMount里添加了一个注册，咱们得立刻在componentWillUnmount中，也就是组件被注销以前清除掉咱们添加的注册，不然内存泄漏的问题就出现了。

怎么清除呢？让咱们传给useEffect的反作用函数返回一个新的函数便可。这个新的函数将会在组件下一次从新渲染以后执行。这种模式在一些pubsub模式的实现中很常见。看下面的例子：

import { useState, useEffect } from 'react';

function FriendStatus(props) {
 const [isOnline, setIsOnline] = useState(null);

 function handleStatusChange(status) {
  setIsOnline(status.isOnline);
 }

 useEffect(() => {
  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  // 必定注意下这个顺序：告诉react在下次从新渲染组件以后，同时是下次调用ChatAPI.subscribeToFriendStatus以前执行cleanup
  return function cleanup() {
   ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
 });

 if (isOnline === null) {
  return 'Loading...';
 }
 return isOnline ? 'Online' : 'Offline';
}

复制代码

这里有一个点须要重视！这种解绑的模式跟componentWillUnmount不同。componentWillUnmount只会在组件被销毁前执行一次而已，而useEffect里的函数，每次组件渲染后都会执行一遍，包括反作用函数返回的这个清理函数也会从新执行一遍。因此咱们一块儿来看一下下面这个问题。

为何要让反作用函数每次组件更新都执行一遍？

咱们先看之前的模式：

componentDidMount() {
  ChatAPI.subscribeToFriendStatus(
   this.props.friend.id,
   this.handleStatusChange
  );
 }

 componentWillUnmount() {
  ChatAPI.unsubscribeFromFriendStatus(
   this.props.friend.id,
   this.handleStatusChange
  );
 }

复制代码

很清除，咱们在componentDidMount注册，再在componentWillUnmount清除注册。但假如这时候props.friend.id变了怎么办？咱们不得再也不添加一个componentDidUpdate来处理这种状况：

componentDidUpdate(prevProps) {
  // 先把上一个friend.id解绑
  ChatAPI.unsubscribeFromFriendStatus(
   prevProps.friend.id,
   this.handleStatusChange
  );
  // 再从新注册新但friend.id
  ChatAPI.subscribeToFriendStatus(
   this.props.friend.id,
   this.handleStatusChange
  );
 }
复制代码

看到了吗？很繁琐，而咱们但useEffect则没这个问题，由于它在每次组件更新后都会从新执行一遍。因此代码的执行顺序是这样的：

  1. 页面首次渲染
  2. 替friend.id=1的朋友注册
  3. 忽然friend.id变成了2
  4. 页面从新渲染
  5. 清除friend.id=1的绑定
  6. 替friend.id=2的朋友注册

怎么跳过一些没必要要的反作用函数

按照上一节的思路，每次从新渲染都要执行一遍这些反作用函数，显然是不经济的。怎么跳过一些没必要要的计算呢？咱们只须要给useEffect传第二个参数便可。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行咱们传的反作用函数（第一个参数）

useEffect(() => {
 document.title = `You clicked ${count} times`;
}, [count]); // 只有当count的值发生变化时，才会从新执行`document.title`这一句
复制代码

当咱们第二个参数传一个空数组[]时，其实就至关于只在首次渲染的时候执行。当前提是这个Effect并不依赖其它可变的参数。 关于更多依赖项的问题能够查看官方文档，文档有很是详细的说明。若是个人 effect 的依赖频繁变化，我该怎么办？ 和 如何处理函数

有关于Hook更多的内容请查阅官方文档Hook简介

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程