如何用React Hooks造轮子，而不是刷抖音？

2024-01-28 00:20:09

上周的精读《React Hooks》已经实现了对 React Hooks 的基本认知，也许你也看了React Hooks 基本实现剖析（就是数组），但理解实现原理就可以用好了吗？学的是知识，而用的是技能，看别人的用法就像刷抖音一样（哇，饭还可以这样吃？），你总会有新的收获… 而且这里所谓认知，大都是停留在 React Hooks 的概念，没有进一步去探究其原理。

原理，需要深刻理解！

今天我们尝试从设计思路和实现细节上去学习。也就是先从理论设计层面去了解React Hooks 的作用原理，再从源码实现层面对这个原理有一个具体的理解。

以useState为例，设计的原理就是：

组件定义一个 useState 叫做 count，返回数组 [state, setState]
React 记录当前组件的状态为 [0, setState]
render 阶段，获取当前状态为 0
组件执行过程 setState(newValue)，更新 React 记录的状态
触发组件重新渲染，获取最新的状态。

看完后是不是觉得很清楚，这个设计是React Hook 的基础，借助这个机制，我们就能够使用最简单的API来完成各种状态更新和副作用处理。

但是了解原理后要如何使用呢？我们如何使用这个原理实现一个Hook，并且如何在项目中使用呢？

理论懂了，自己动手写一遍：

// 定义一个useState函数
export const useState = (initialState) => {
  // 定义一个state变量，并将其值设置为initialState
  let state = initialState;
  // 定义一个setState函数，用于更新state
  const setState = (newValue) => {
    // 更新state变量的值
    state = newValue;
    // 触发组件重新渲染
    render();
  };
  // 返回一个包含state和setState的数组
  return [state, setState];
};

在实际的项目中，Hooks 是如何被使用的呢？

import { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};