动手编写 Hook：亲手揭秘 React 的魔力

让我们从一个实际问题出发，假设我们有一个函数组件，需要管理一个计数器。传统上，我们需要使用类组件和状态提升来实现，但这会带来一些复杂性和不必要的样板代码。

而 Hook 的出现，正是为了解决这个问题。它允许我们在函数组件中使用状态和其他 React 特性，无需编写类组件。让我们动手编写一个迷你版的 useState Hook，来看看它是如何工作的。

第一步：引入 React 和 ReactDom

首先，我们需要导入 React 和 ReactDom 库。

import React from "react";
import ReactDOM from "react-dom";

第二步：编写迷你版 useState Hook

接下来，我们编写迷你版的 useState Hook。它接受一个初始值作为参数，并返回一个数组，其中第一个元素是当前状态，第二个元素是一个更新状态的函数。

const useState = (initialState) => {
  let state = initialState;
  const setState = (newState) => {
    state = newState;
    render(); // 这里会触发重新渲染组件
  };
  return [state, setState];
};

第三步：使用迷你版 useState Hook

现在，我们可以使用我们的迷你版 useState Hook 来管理计数器。

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+</button>
    </div>
  );
};

第四步：渲染组件

最后，我们渲染组件。

ReactDOM.render(<MyComponent />, document.getElementById("root"));

图解运行原理

当我们点击按钮时，handleClick 函数会被调用，它调用 setCount 函数更新状态。这会导致 state 变量的值发生改变，从而触发 MyComponent 组件的重新渲染。在重新渲染期间，count 的值将更新，并且按钮旁边的计数器也会随之更新。

总结

通过编写迷你版的 useState Hook，我们亲身体验了 Hook 在源码中的运行原理。它简化了状态管理，使我们能够在函数组件中轻松使用状态和其他 React 特性。理解 Hook 的内部运作机制，有助于我们在 React 开发中写出更优雅、更高效的代码。