React Hooks 源码解读之 useState 的前世今生

2023-12-09 04:38:30

导语： React Hooks 的出现，极大地简化了 React 的组件编写方式，让开发者能够更专注于业务逻辑的实现。而 useState 作为 React Hooks 中最基础的 Hook，其背后蕴含着丰富的实现原理，值得我们深入探索。

从 mountState 到 useState：useState 的前世

在 React Hooks 诞生之前，开发者通常通过声明类组件的方式来编写 React 组件。类组件中，状态的管理是通过 this.state 属性来实现的。而在组件的生命周期中，通过调用 setState 方法可以更新组件的状态。

mountState 函数：

mountState = (initialState) => {
  const hook = {
    current: initialState
  };
  currentHook = hook;
  return hook.current;
};

在 React Hooks 出现之前，当一个函数组件第一次渲染时，就会调用 mountState 函数。mountState 函数负责初始化组件的状态，并将其存储在 hook 对象中。

从 updateState 到 useState：useState 的今生

随着 React Hooks 的引入，状态的管理方式发生了翻天覆地的变化。useState Hook 应运而生，它取代了 mountState 和 updateState 函数，成为管理状态的主要方式。

useState 函数：

useState = (initialState) => {
  const hook = updateState(initialState);
  currentHook = hook;
  return hook.current;
};

useState Hook 的工作原理与 mountState 函数类似，只不过它还将 updateState 函数封装在了内部。当组件第一次渲染时，useState Hook 会调用 updateState 函数来初始化组件的状态。而在 subsequent 渲染中，useState Hook 会直接从 hook 对象中获取当前的状态。