了解React Hooks及其常用的几个钩子函数

写在前面

React Hooks 是 React 团队在两年前的 16.8 版本推出的一套全新的机制。作为最主流的前端框架，React 的 API 十分稳定，这次更新的发布，让众多恐惧新轮子的前端大佬们虎躯一震，毕竟每一次更新又是高成本的学习，这玩意到底好使么？

答案是好用的，对于 React 的开发者而言，只是多了一个选择。过去的开发方式是基于Class组件的，而hooks是基于函数组件，这意味着 这两种开发方式可以并存 ，而新的代码可以根据具体情况采用 Hooks 的方式来实现就行了。这篇文章主要就来介绍一下 Hooks 的优势 和 常用的几个钩子函数 。

Hooks的优势

1.类组件的不足

• 代码量多 ：

  相较于函数组件的写法，使用类组件代码量要略多一点，这个是最直观的感受。

• this指向：

  类组件中总是需要考虑this的指向问题，而函数组件则可以忽略。

• 趋向复杂难以维护 ：

  在高版本的React中，又更新了一些生命周期函数，因为这些函数互相解耦，很容易造成分散不集中的写法，漏掉关键逻辑和多了冗余逻辑，导致后期debug困难。相反，hooks可以把关键逻辑都放在一起，不显得那么割裂，调试起来也易懂一点。

• 状态逻辑难复用 ：

  在组件之间复用状态逻辑很难，可能要用到 render props （渲染属性）或者 HOC （高阶组件），但无论是渲染属性，还是高阶组件，都会在原先的组件外包裹一层父容器（一般都是 div 元素），导致层级冗余。

2. Hooks带来的好处

• 逻辑复用

  在组件之前复用状态逻辑，往往需要借助高阶组件等复杂的设计模式，这些高级组件会产生冗余的组件节点，让调试变得困难，下面用一个demo来对比一下两种实现方式。

在class组件场景下，定义了一个高阶组件，负责监听窗口大小变化，并将变化后的值作为 props 传给下一个组件。

const useWindowSize = Component => {
  // 产生一个高阶组件 HOC，只包含监听窗口大小的逻辑
  class HOC extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        size: this.getSize()
      };
    }
    componentDidMount() {
      window.addEventListener("resize", this.handleResize);
    }
    componentWillUnmount() {
      window.removeEventListener("resize", this.handleResize);
    }
    getSize() {
      return window.innerWidth > 1000 ? "large" ："small";
    }
    handleResize = ()=> {
      const currentSize = this.getSize();
      this.setState({
        size: this.getSize()
      });
    }
    render() {
      // 将窗口大小传递给真正的业务逻辑组件
      return <Component size={this.state.size} />;
    }
  }
  return HOC;
};

接下来可以在自定义组件中可以调用 useWindowSize 这样的函数来产生一个新组件，并自带 size 属性，例如：

class MyComponent extends React.Component{
  render() {
    const { size } = this.props;
    if (size === "small") return <SmallComponent />;
    else return <LargeComponent />;
  }
}
// 使用 useWindowSize 产生高阶组件，用于产生 size 属性传递给真正的业务组件
export default useWindowSize(MyComponent); 

下面看下Hooks的实现方式

const getSize = () => {
  return window.innerWidth > 1000 ? "large" : "small";
}
const useWindowSize = () => {
  const [size, setSize] = useState(getSize());
  useEffect(() => {
  const handler = () => {
      setSize(getSize())
    };
    window.addEventListener('resize', handler);
    return () => {
      window.removeEventListener('resize', handler);
    };
  }, []);

  return size;
};

使用：

const Demo = () => {
  const size = useWindowSize();
  if (size === "small") return <SmallComponent />;
  else return <LargeComponent />;
};

从上面的例子中通过 Hooks 的方式对窗口大小进行了封装，从而将其变成一个可绑定的数据源。这样当窗口大小发生变化时，使用这个 Hook 的组件就都会重新渲染。而且代码也更加简洁和直观，不会产生额外的组件节点，也不显得那么冗余了。

• 业务代码更加聚合

下面举一个最常见的计时器的例子。

let timer = null
componentDidMount() {
    timer = setInterval(() => {
        // ...
    }, 1000)
}
// ...
componentWillUnmount() {
    if (timer) clearInterval(timer)
}

useEffect(() => {
    let timer = setInterval(() => {
        // ...
    }, 1000)
    return () => {
        if (timer) clearInterval(timer)
    }
}, [//...])

Hooks的实现方式能让代码更加集中，逻辑也更清晰。

• 写法简洁

这个就不举例了，可以从字面意思理解，使用函数组件确实能少些很多代码，懂得都懂，嘻嘻~

几个内置Hooks的作用以及使用思考

useState ：让函数组件具有维持状态的能力

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

优点：

让函数组件具有维持状态的能力，即：在一个函数组件的多次渲染之间，这个 state 是共享的。便于维护状态。

缺点：

一旦组件有自己状态，意味着组件如果重新创建，就需要有恢复状态的过程，这通常会让组件变得更复杂。

用法：

1. useState(initialState) 的参数 initialState 是创建 state 的初始值。

1. useState() 的返回值是一个有着两个元素的数组。第一个数组元素用来读取 state 的值，第二个则是用来设置这个 state 的值。

1. 如果要创建多个 state ，那么我们就需要多次调用 useState。

什么样的值应该保存在 state 中？

通常来说，我们要遵循的一个原则就是：state 中不要保存可以通过计算得到的值 。

• 从 props 传递过来的值。有时候 props 传递过来的值无法直接使用，而是要通过一定的计算后再在 UI 上展示，比如说排序。那么我们要做的就是每次用的时候，都重新排序一下，或者利用某些 cache 机制，而不是将结果直接放到 state 里。
• 从 URL 中读到的值。比如有时需要读取 URL 中的参数，把它作为组件的一部分状态。那么我们可以在每次需要用的时候从 URL 中读取，而不是读出来直接放到 state 里。
• 从 cookie、localStorage 中读取的值。通常来说，也是每次要用的时候直接去读取，而不是读出来后放到 state 里。

useEffect：执行副作用

useEffect ，顾名思义，用于执行一段副作用。

什么是副作用？

通常来说，副作用是指一段和当前执行结果无关的代码。比如说要修改函数外部的某个变量，要发起一个请求，等等。

也就是说，在函数组件的当次执行过程中， useEffect 中代码的执行是不影响渲染出来的 UI 的。

对应到 Class 组件，那么 useEffect 就涵盖了 ComponentDidMount、componentDidUpdate 和 componentWillUnmount 三个生命周期方法。不过如果你习惯了使用 Class 组件，那千万不要按照把 useEffect 对应到某个或者某几个生命周期的方法。你只要记住，useEffect 是每次组件 render 完后判断依赖并执行就可以了。

useEffect 还有两个特殊的用法：没有依赖项，以及依赖项作为空数组。我们来具体分析下。

1. 没有依赖项，则每次 render 后都会重新执行。例如：

useEffect(() => {
  // 每次 render 完一定执行
  console.log('渲染...........');
});

1. 空数组作为依赖项，则只在首次执行时触发，对应到 Class 组件就是 componentDidMount。例如：

useEffect(() => {
  // 组件首次渲染时执行，等价于 class 组件中的 componentDidMount
  console.log('did mount........');
}, []);

小结用法:

总结一下，useEffect 让我们能够在下面四种时机去执行一个回调函数产生副作用：

1. 每次 render 后执行：不提供第二个依赖项参数。

1. 仅第一次 render 后执行：提供一个空数组作为依赖项。

1. 第一次以及依赖项发生变化后执行：提供依赖项数组。

1. 组件 unmount 后执行：返回一个回调函数。

useCallback：缓存回调函数

为什么要使用useCallback?

在 React 函数组件中， 每一次 UI 的变化，都是通过重新执行整个函数来完成的 ，这和传统的 Class 组件有很大区别：函数组件中并没有一个直接的方式在多次渲染之间维持一个状态。

function Counter() {
  const [count, setCount] = useState(0);
  const handleIncrement = () => setCount(count+1);
  return <button onClick={handleIncrement}>+</button>
}

思考下这个过程。 每次组件状态发生变化的时候，函数组件实际上都会重新执行一遍 。在每次执行的时候，实际上都会创建一个新的事件处理函数 handleIncrement 。

这也意味着，即使 count 没有发生变化，但是函数组件因为其它状态发生变化而重新渲染时（函数组件重新被执行），这种写法也会每次创建一个新的函数。创建一个新的事件处理函数，虽然不影响结果的正确性，但其实是没必要的。因为这样做不仅增加了系统的开销，更重要的是： 每次创建新函数的方式会让接收事件处理函数的组件，需要重新渲染 。

比如这个例子中的 button 组件，接收了 handleIncrement ，并作为一个属性。如果每次都是一个新的，那么这个 React 就会认为这个组件的 props 发生了变化，从而必须重新渲染。因此，我们需要做到的是： 只有当 count 发生变化时，我们才需要重新定一个回调函数 。而这正是 useCallback 这个 Hook 的作用。

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

function Counter() {
  const [count, setCount] = useState(0);
  const handleIncrement = useCallback(
    () => setCount(count + 1),
    [count], // 只有当 count 发生变化时，才会重新创建回调函数
  );
  return <button onClick={handleIncrement}>+</button>
}

useMemo：缓存计算的结果

useMemo(fn, deps);

这里的 fn 是产生所需数据的一个 计算函数 。通常来说， fn 会使用 deps 中声明的一些变量来生成一个结果，用来渲染出最终的 UI 。

这个场景应该很容易理解：如果某个 数据 是通过其它数据计算得到的，那么只有当用到的数据，也就是依赖的数据发生变化的时候，才应该需要重新计算。

避免重复计算

举个例子：

const calc = (a, b) => {
    // 假设这里做了复杂的计算，暂时用次幂模拟
    return a ** b;
}
const MyComponent = (props) => {
    const {a, b} = props;
    const c = calc(a, b);
    return <div>c: {c}</div>;
}

如果 calc 计算耗时 1000ms，那么每次渲染都要等待这么久，怎么优化呢？

所以我们可以用 useMemo 把值给缓存起来，避免重复计算相同的结果。

const calc = (a, b) => {
    // 假设这里做了复杂的计算，暂时用次幂模拟
    return a ** b;
}
const MyComponent = (props) => {
    const {a, b} = props;
    // 缓存
    const c = React.useMemo(() => calc(a, b), [a, b]);
    return <div>c: {c}</div>;
}

useCallback 的功能其实是可以用 useMemo 来实现的:

 const myEventHandler = useMemo(() => {
   // 返回一个函数作为缓存结果
   return () => {
     // 在这里进行事件处理
   }
 }, [dep1, dep2]);

小结一下：

感觉到这有这种感觉，其实 hook 就是建立了一个绑定某个结果到依赖数据的关系。只有当依赖变了，这个结果才需要被重新得到。

useRef：在多次渲染之间共享数据

const myRefContainer =useRef(initialValue);

我们可以把 useRef 看作是在函数组件之外创建的一个容器空间。在这个容器上，我们可以通过唯一的 current 属设置一个值，从而在函数组件的多次渲染之间共享这个值。

useRef 的重要的功能

1. 存储跨渲染的数据

使用 useRef 保存的数据一般是和 UI 的渲染无关的，因此当 ref 的值发生变化时，是不会触发组件的重新渲染的，这也是 useRef 区别于 useState 的地方。

举例：

 const [time, setTime] = useState(0);
 // 定义 timer 这样一个容器用于在跨组件渲染之间保存一个变量
 const timer = useRef(null);

  const handleStart = useCallback(() => {
    // 使用 current 属性设置 ref 的值
    timer.current = window.setInterval(() => { setTime((time) => time + 1); }, 100);
  }, []);

2. 保存某个 DOM 节点的引用

React 官方例子：

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // current 属性指向了真实的 input 这个 DOM 节点，从而可以调用 focus 方法
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

理解：

可以看到ref 这个属性提供了获得 DOM 节点的能力，并利用 useRef 保存了这个节点的应用。这样的话，一旦 input 节点被渲染到界面上，那我们通过 inputEl.current 就能访问到真实的 DOM 节点的实例了

useContext：定义全局状态

为什么要使用 useContext？

React 组件之间的状态传递只有一种方式，那就是通过 props。缺点： 这种传递关系只能在父子组件之间进行。

那么问题出现：跨层次，或者同层的组件之间要如何进行数据的共享？这就涉及到一个新的命题： 全局状态管理 。

react提供的解决方案： Context 机制。

具体原理：

React 提供了 Context 这样一个机制， 能够让所有在某个组件开始的组件树上创建一个 Context 。这样这个组件树上的所有组件，就都能访问和修改这个 Context 了。

那么在函数组件里，我们就可以使用 useContext 这样一个 Hook 来管理 Context。

使用：（这儿用了官方例子）

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};
// 创建一个 Theme 的 Context

const ThemeContext = React.createContext(themes.light);
function App() {
  // 整个应用使用 ThemeContext.Provider 作为根组件
  return (
    // 使用 themes.dark 作为当前 Context
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 在 Toolbar 组件中使用一个会使用 Theme 的 Button
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// 在 Theme Button 中使用 useContext 来获取当前的主题
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{
      background: theme.background,
      color: theme.foreground
    }}>
      I am styled by theme context!
    </button>
  );
}

优点：

Context 提供了一个方便在多个组件之间共享数据的机制。

缺点：

Context 相当于提供了一个定义 React 世界中全局变量的机制，而全局变量则意味着两点：

1. 会让调试变得困难，因为你很难跟踪某个 Context 的变化究竟是如何产生的。

2. 让组件的复用变得困难，因为一个组件如果使用了某个 Context ，它就必须确保被用到的地方一定有这个 Context 的 Provider 在其父组件的路径上。

实际应用场景

由于以上缺点，所以在 React 的开发中，除了像 Theme、Language 等一目了然的需要全局设置的变量外），我们很少会使用 Context 来做太多数据的共享。需要再三强调的是，Context 更多的是提供了一个强大的机制，让 React 应用具备定义全局的响应式数据的能力。

最后

感觉这次的内容不多不少。其实了解学会了useState 和 useEffect 这两个 核心 Hooks，基本能完成绝大多数 React 功能的开发了。

useCallback、useMemo、useRef 和 useContext。这几个 Hook 都是为了解决函数组件中遇到的特定问题。

还有几个比较边缘的hook这里就不再写了，有兴趣的大佬可以移步到官方文档上看看。

码字不易，也辛苦大佬们指导交流~

团队

TNTWeb - 腾讯新闻前端团队，TNTWeb 致力于行业前沿技术探索和团队成员个人能力提升。为前端开发人员整理出了小程序以及 web 前端技术领域的最新优质内容，每周更新 ✨，欢迎 star，github 地址：https://github.com/tnfe/TNT-Weekly