自定义单值useState Polyfill正确性排查：为何实现无法正常工作？

咱们直接切入正题：你写的这个Polyfill是不正确的，核心问题在于它完全没有贴合React状态管理的核心机制，导致状态无法持久化、更新也不会触发组件重渲染。具体问题拆解如下：

1. 状态完全没有持久化 #

每次组件重新渲染时，useMyState函数都会被重新执行，这时候会创建一个全新的obj对象，初始值还是你传入的initVal——之前通过setVal修改的状态会直接丢失，相当于每次渲染都回到了初始状态。

2. 没有触发React的重渲染机制 #

React的useState最关键的特性之一是：调用setter更新状态时，会通知React重新渲染组件，这样组件才能拿到更新后的状态值。而你的setVal只是修改了普通对象的属性，完全没有和React的渲染调度系统挂钩，所以哪怕obj.value变了，组件也不会重新渲染，自然不会再次执行useMyState去获取新值，看起来就像getter从未被调用。

3. 返回的状态是静态值而非动态引用 #

你返回的obj.stateValGet是第一次调用getter时的结果，只是一个普通的值，不是可以动态获取最新状态的引用。也就是说，第一次渲染拿到初始值后，哪怕后续obj.value变了，这个已经返回的值也不会自动更新。

修复后的简易Polyfill实现 #

要模拟原生useState的核心行为，我们需要借助React提供的useRef（用于持久化状态）和useState（用于触发重渲染）来实现：

function useMyState(initVal) {
  // 用useRef持久化状态：ref的current属性在组件整个生命周期内保持引用不变
  const stateRef = React.useRef(initVal);
  // 用一个空状态的setter触发重渲染（只要状态变化，React就会重新渲染组件）
  const [, forceUpdate] = React.useState();

  const setVal = (val) => {
    // 支持函数式更新（和原生useState对齐）
    const newVal = typeof val === 'function' ? val(stateRef.current) : val;
    // 更新持久化的状态
    stateRef.current = newVal;
    // 触发重渲染，让组件拿到最新状态
    forceUpdate({});
  };

  // 返回当前最新的状态值和setter
  return [stateRef.current, setVal];
}

这个实现的核心逻辑和原生useState对齐：

• 用useRef保证状态在组件多次渲染间持久化；
• 通过forceUpdate触发组件重渲染，确保状态更新后组件能拿到最新值；
• 支持函数式更新，和原生API的行为保持一致。

内容的提问来源于stack exchange，提问作者kanine