React Hooks 解析（上）：基础

欢迎关注我的公众号睿Talk，获取我最新的文章：

一、前言

React Hooks 是从 v16.8 引入的又一开创性的新特性。第一次了解这项特性的时候，真的有一种豁然开朗，发现新大陆的感觉。我深深的为 React 团队天马行空的创造力和精益求精的钻研精神所折服。本文除了介绍具体的用法外，还会分析背后的逻辑和使用时候的注意事项，力求做到知其然也知其所以然。

这个系列分上下两篇，这里是下篇的传送门：
React Hooks 解析（下）：进阶

二、Hooks 的由来

Hooks的出现是为了解决 React 长久以来存在的一些问题：

• 带组件状态的逻辑很难重用

为了解决这个问题，需要引入render props或higher-order components这样的设计模式，如react-redux提供的connect方法。这种方案不够直观，而且需要改变组件的层级结构，极端情况下会有多个wrapper嵌套调用的情况。

Hooks可以在不改变组件层级关系的前提下，方便的重用带状态的逻辑。

• 复杂组件难于理解

大量的业务逻辑需要放在componentDidMount和componentDidUpdate等生命周期函数中，而且往往一个生命周期函数中会包含多个不相关的业务逻辑，如日志记录和数据请求会同时放在componentDidMount中。另一方面，相关的业务逻辑也有可能会放在不同的生命周期函数中，如组件挂载的时候订阅事件，卸载的时候取消订阅，就需要同时在componentDidMount和componentWillUnmount中写相关逻辑。

Hooks可以封装相关联的业务逻辑，让代码结构更加清晰。

• 难于理解的 Class 组件

JS 中的this关键字让不少人吃过苦头，它的取值与其它面向对象语言都不一样，是在运行时决定的。为了解决这一痛点，才会有剪头函数的this绑定特性。另外 React 中还有Class Component和Function Component的概念，什么时候应该用什么组件也是一件纠结的事情。代码优化方面，对Class Component进行预编译和压缩会比普通函数困难得多，而且还容易出问题。

Hooks可以在不引入 Class 的前提下，使用 React 的各种特性。

三、什么是 Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function components

上面是官方解释。从中可以看出 Hooks 是函数，有多个种类，每个 Hook 都为Function Component提供使用 React 状态和生命周期特性的通道。Hooks 不能在Class Component中使用。

React 提供了一些预定义好的 Hooks 供我们使用，下面我们来详细了解一下。

四、State Hook

先来看一个传统的Class Component:

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>
    );
  }
}

使用 State Hook 来改写会是这个样子：

import React, { useState } from 'react';

function Example() {
  // 定义一个 State 变量，变量值可以通过 setCount 来改变
  const [count, setCount] = useState(0);

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

可以看到useState的入参只有一个，就是 state 的初始值。这个初始值可以是一个数字、字符串或对象，甚至可以是一个函数。当入参是一个函数的时候，这个函数只会在这个组件初始渲染的时候执行：

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

useState的返回值是一个数组，数组的第一个元素是 state 当前的值，第二个元素是改变 state 的方法。这两个变量的命名不需要遵守什么约定，可以自由发挥。要注意的是如果 state 是一个对象，setState 的时候不会像Class Component的 setState 那样自动合并对象。要达到这种效果，可以这么做：

setState(prevState => {
  // Object.assign 也可以
  return {...prevState, ...updatedValues};
});

从上面的代码可以看出，setState 的参数除了数字、字符串或对象，还可以是函数。当需要根据之前的状态来计算出当前状态值的时候，就需要传入函数了，这跟Class Component的 setState 有点像。

另外一个跟Class Component的 setState 很像的一点是，当新传入的值跟之前的值一样时(使用Object.is比较)，不会触发更新。

五、Effect Hook

解释这个 Hook 之前先理解下什么是副作用。网络请求、订阅某个模块或者 DOM 操作都是副作用的例子，Effect Hook 是专门用来处理副作用的。正常情况下，在Function Component的函数体中，是不建议写副作用代码的，否则容易出 bug。

下面的Class Component例子中，副作用代码写在了componentDidMount和componentDidUpdate中:

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>
    );
  }
}

可以看到componentDidMount和componentDidUpdate中的代码是一样的。而使用 Effect Hook 来改写就不会有这个问题：

import React, { useState, useEffect } from 'react';

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

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

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

useEffect会在每次 DOM 渲染后执行，不会阻塞页面渲染。它同时具备componentDidMount、componentDidUpdate和componentWillUnmount三个生命周期函数的执行时机。

此外还有一些副作用需要组件卸载的时候做一些额外的清理工作的，例如订阅某个功能：

class FriendStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

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

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

  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }

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

在componentDidMount订阅后，需要在componentWillUnmount取消订阅。使用 Effect Hook 来改写会是这个样子：

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    
    // 返回一个函数来进行额外的清理工作:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

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

当useEffect的返回值是一个函数的时候，React 会在下一次执行这个副作用之前执行一遍清理工作，整个组件的生命周期流程可以这么理解：

组件挂载 --> 执行副作用 --> 组件更新 --> 执行清理函数 --> 执行副作用 --> 组件更新 --> 执行清理函数 --> 组件卸载

上文提到useEffect会在每次渲染后执行，但有的情况下我们希望只有在 state 或 props 改变的情况下才执行。如果是Class Component，我们会这么做：

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    document.title = `You clicked ${this.state.count} times`;
  }
}

使用 Hook 的时候，我们只需要传入第二个参数：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 只有在 count 改变的时候才执行 Effect

第二个参数是一个数组，可以传多个值，一般会将 Effect 用到的所有 props 和 state 都传进去。

当副作用只需要在组件挂载的时候和卸载的时候执行，第二个参数可以传一个空数组[]，实现的效果有点类似componentDidMount和componentWillUnmount的组合。

六、总结

本文介绍了在 React 之前版本中存在的一些问题，然后引入 Hooks 的解决方案，并详细介绍了 2 个最重要的 Hooks：useState和useEffect的用法及注意事项。本来想一篇写完所有相关的内容，但发现坑有点深，只能分两次填了:）