useState简易版源码

以下是一个简化版的 useState 的源码示例，用于演示其基本实现原理：

let state; // 用于存储状态值
let listeners = []; // 用于存储状态变化时的监听函数数组

function useState(initialValue) {
  state = state || initialValue; // 如果状态值还未初始化，则使用初始值进行初始化

  function setState(newState) {
    state = newState; // 更新状态值

    // 触发状态变化时的监听函数
    for (let i = 0; i < listeners.length; i++) {
      listeners[i]();
    }
  }

  function getState() {
    return state; // 返回当前状态值
  }

  // 注册状态变化时的监听函数，并返回当前状态值及状态更新函数
  listeners.push(() => {
    const value = getState();
    setState(value);
  });

  return [getState(), setState]; // 返回当前状态值及状态更新函数
}

上述代码中，我们使用了闭包来保存状态值 state 和状态变化时的监听函数数组 listeners。useState 函数接收一个初始值 initialValue，并返回一个由当前状态值和状态更新函数组成的数组。

在 setState 函数中，我们更新了状态值 state，并遍历 listeners 数组，触发每个监听函数，以通知组件的状态发生了变化。

在组件中使用 useState 的示例代码：

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

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

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

这是一个简化版的 useState 实现，仅用于演示其基本原理。实际的 React 源码中还包含了更多的优化和处理，例如处理多个状态值、批量更新等。这个简化版的实现可以帮助你更好地理解 useState 的基本工作原理。