30分钟精通React Hooks

时间 2019-11-05

标签 30分精通 react hooks 栏目 React 繁體版

原文原文链接

你还在为该使用无状态组件（Function）仍是有状态组件（Class）而烦恼吗？ ——拥有了hooks，你不再须要写Class了，你的全部组件都将是Function。html

你还在为搞不清使用哪一个生命周期钩子函数而日夜难眠吗？ ——拥有了Hooks，生命周期钩子函数能够先丢一边了。node

你在还在为组件中的this指向而晕头转向吗？ ——既然Class都丢掉了，哪里还有this？你的人生第一次再也不须要面对this。react

这样看来，说React Hooks是今年最劲爆的新特性真的绝不夸张。若是你也对react感兴趣，或者正在使用react进行项目开发，答应我，请必定抽出至少30分钟的时间来阅读本文好吗？es6

一个最简单的Hooks

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

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后的版本：redux

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让咱们的函数变成了一个有状态的函数。segmentfault

除了useState这个hook外，还有不少别的hook，好比useEffect提供了相似于componentDidMount等生命周期钩子的功能，useContext提供了上下文（context）的功能等等。数组

Hooks本质上就是一类特殊的函数，它们能够为你的函数型组件（function component）注入一些特殊的功能。咦？这听起来有点像被诟病的Mixins啊？难道是Mixins要在react中死灰复燃了吗？固然不会了，等会咱们再来谈二者的区别。总而言之，这些hooks的目标就是让你再也不写class，让function一统江湖。浏览器

React为何要搞一个Hooks？

想要复用一个有状态的组件太麻烦了！

咱们都知道react都核心思想就是，将一个页面拆成一堆独立的，可复用的组件，而且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工做项目中用react，你会发现你的项目中实际上不少react组件冗长且难以复用。尤为是那些写成class的组件，它们自己包含了状态（state），因此复用这类组件就变得很麻烦。bash

那以前，官方推荐怎么解决这个问题呢？答案是：渲染属性（Render Props）和高阶组件（Higher-Order Components）。咱们能够稍微跑下题简单看一下这两种模式。

渲染属性指的是使用一个值为函数的prop来传递须要动态渲染的nodes或组件。以下面的代码能够看到咱们的DataProvider组件包含了全部跟状态相关的代码，而Cat组件则能够是一个单纯的展现型组件，这样一来DataProvider就能够单独复用了。

import Cat from 'components/cat'
class DataProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = { target: 'Zac' };
  }

  render() {
    return (
      <div>
        {this.props.render(this.state)}
      </div>
    )
  }
}

<DataProvider render={data => (
  <Cat target={data.target} />
)}/>

复制代码

虽然这个模式叫Render Props，但不是说非用一个叫render的props不可，习惯上你们更常写成下面这种：

...
<DataProvider>
  {data => (
    <Cat target={data.target} />
  )}
</DataProvider>
复制代码

高阶组件这个概念就更好理解了，说白了就是一个函数接受一个组件做为参数，通过一系列加工后，最后返回一个新的组件。看下面的代码示例，withUser函数就是一个高阶组件，它返回了一个新的组件，这个组件具备了它提供的获取用户信息的功能。

const withUser = WrappedComponent => {
  const user = sessionStorage.getItem("user");
  return props => <WrappedComponent user={user} {...props} />;
};

const UserPage = props => (
  <div class="user-container">
    <p>My name is {props.user}!</p>
  </div>
);

export default withUser(UserPage);
复制代码

以上这两种模式看上去都挺不错的，不少库也运用了这种模式，好比咱们经常使用的React Router。但咱们仔细看这两种模式，会发现它们会增长咱们代码的层级关系。最直观的体现，打开devtool看看你的组件层级嵌套是否是很夸张吧。这时候再回过头看咱们上一节给出的hooks例子，是否是简洁多了，没有多余的层级嵌套。把各类想要的功能写成一个一个可复用的自定义hook，当你的组件想用什么功能时，直接在组件里调用这个hook便可。

生命周期钩子函数里的逻辑太乱了吧！

咱们一般但愿一个函数只作一件事情，但咱们的生命周期钩子函数里一般同时作了不少事情。好比咱们须要在componentDidMount中发起ajax请求获取数据，绑定一些事件监听等等。同时，有时候咱们还须要在componentDidUpdate作一遍一样的事情。当项目变复杂后，这一块的代码也变得不那么直观。

classes真的太让人困惑了！

咱们用class来建立react组件时，还有一件很麻烦的事情，就是this的指向问题。为了保证this的指向正确，咱们要常常写这样的代码：this.handleClick = this.handleClick.bind(this)，或者是这样的代码：<button onClick={() => this.handleClick(e)}>。一旦咱们不当心忘了绑定this，各类bug就随之而来，很麻烦。

还有一件让我很苦恼的事情。我在以前的react系列文章当中曾经说过，尽量把你的组件写成无状态组件的形式，由于它们更方便复用，可独立测试。然而不少时候，咱们用function写了一个简洁完美的无状态组件，后来由于需求变更这个组件必须得有本身的state，咱们又得很麻烦的把function改为class。

在这样的背景下，Hooks便横空出世了！

什么是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。

上面这种表达形式，是借用了es6的数组解构（array destructuring），它可让咱们的代码看起来更简洁。不清楚这种用法的能够先去看下个人这篇文章30分钟掌握ES6/ES2015核心内容（上）。

若是不用数组解构的话，能够写成下面这样。实际上数组解构是一件开销很大的事情，用下面这种写法，或者改用对象解构，性能会有很大的提高。具体能够去这篇文章的分析Array destructuring for multi-value returns (in light of React hooks)，这里不详细展开，咱们就按照官方推荐使用数组解构就好。

let _useState = useState(0);
let count = _useState[0];
let setCount = _useState[1];
复制代码

读取状态值

<p>You clicked {count} times</p>
复制代码

是否是超简单？由于咱们的状态count就是一个单纯的变量而已，咱们不再须要写成{this.state.count}这样了。

更新状态

<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`这一句
复制代码

当咱们第二个参数传一个空数组[]时，其实就至关于只在首次渲染的时候执行。也就是componentDidMount加componentWillUnmount的模式。不过这种用法可能带来bug，少用。

还有哪些自带的Effect Hooks?

除了上文重点介绍的useState和useEffect，react还给咱们提供来不少有用的hooks：

useContext useReducer useCallback useMemo useRef useImperativeMethods useMutationEffect useLayoutEffect

我再也不一一介绍，你们自行去查阅官方文档。

怎么写自定义的Effect Hooks?

为何要本身去写一个Effect Hooks? 这样咱们才能把能够复用的逻辑抽离出来，变成一个个能够随意插拔的“插销”，哪一个组件要用来，我就插进哪一个组件里，so easy！看一个完整的例子，你就明白了。

好比咱们能够把上面写的FriendStatus组件中判断朋友是否在线的功能抽出来，新建一个useFriendStatus的hook专门用来判断某个id是否在线。

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

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

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}
复制代码

这时候FriendStatus组件就能够简写为：

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

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

简直Perfect！假如这个时候咱们又有一个朋友列表也须要显示是否在线的信息：

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}
复制代码

简直Fabulous!

结尾

不知道你阅读完整篇文章的感觉如何，或者对hooks有任何角度的见解和思考都欢迎在评论区一块儿讨论。另外若是你有换工做的打算，咱们部门真的很缺人，欢迎私信勾搭～（阿里巴巴，base在深圳的部门lazada，要求三年及以上工做经验，可邮件跟我交流或者接简历丢给我：zeqiang.wang@alibaba-inc.com）