这是我参与「第五届青训营」伴学笔记创作活动的第 9 天，之前草草的学习过一段时间的Raect，当时觉得官方文档稍有些绕有点看不进去，索性找了网上看起来不错的教程跟着学习。不巧的是，找到的课有些年代了，其中还没有完善的函数组件。所以重新学习一下 React Hook。

什么是 React Hook

React Hook 是 React 16.8 版本新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

class 组件的痛点

组件逻辑难以复用，之前的解决方案是使用高阶组件（HOC）或者 render props，但是这两种方案都有一些缺点。
复杂组件变得难以理解，因为逻辑被拆分到不同的生命周期函数中。
this 的指向问题，提高了理解的难度。

在 Hook 中使用 state

代码示例：

import React, { useState } from 'react';
const LikeButton: React.FC = () => {
  const [like, setLike] = useState(0);
  return (
    <button onClick={() => { setLike(like + 1) }}>
      {like} 👍
    </button>
  )
}

在上述代码中，我们使用了 useState()，它接收一个初始 state 作为参数，返回一个数组，数组的第一个元素是当前的 state，第二个元素是更新 state 的函数。当我们点击按钮时，就会调用 setLike()，它会更新 state，从而触发组件的重新渲染。

在 Hook 中使用 effect

代码示例：

import React, { useState, useEffect } from 'react';
const LikeButton: React.FC = () => {
  const [like, setLike] = useState(0);
  const [on, setOn] = useState(true);
  useEffect(() => {
    document.title = `点击了 ${like} 次`;
  }, [like]);
  return (
    <>
      <button onClick={() => { setLike(like + 1) }}>
        {like} 👍
      </button>
      <button onClick={() => { setOn(!on) }}>
        {on ? 'ON' : 'OFF'}
      </button>
    </>
  )
}

在上述代码中，我们使用了 useEffect()，它接收一个函数作为参数，这个函数会在组件渲染到屏幕之后执行。useEffect() 还可以接收第二个参数，这个参数是一个数组，数组中可以指定多个 state，当这些 state 发生变化时，useEffect() 会重新执行。如果不指定第二个参数，useEffect() 会在每次渲染之后都执行。

effect 的清除

在我们使用 useEffect() 时，还可以返回一个函数，这个函数会在组件卸载或者 effect 重新执行时执行。这个函数就是 effect 的清除函数。有些时候，我们需要在 effect 执行之前清除之前的 effect，这时候就可以使用 effect 的清除函数。例如，当我们在组件中使用了定时器时，我们需要在组件卸载时清除定时器，否则会出现内存泄漏的问题。

认识 React Hook | 青训营笔记

什么是 React Hook

class 组件的痛点

在 Hook 中使用 state

在 Hook 中使用 effect

effect 的清除