React自定义useCustomState Hook：setState无法更新状态问题排查

你的useCustomState无法正常工作，核心问题有两个：

错误原因 #

• 状态无法持久化：每次组件渲染时，useCustomState都会重新执行，let value = initialState会把value重置为初始值，之前修改的状态会直接丢失。
• 未触发React重渲染：你用普通变量存储状态，React无法追踪它的变化。调用setValue修改value后，只是改变了变量的值，但不会通知React重新渲染组件，页面上的状态自然不会更新。

修复后的代码 #

要实现和useState一致的功能，需要让状态持久化且能触发重渲染，我们可以结合useRef（持久化状态）和useState（触发重渲染）来实现：

import React, { useRef, useState } from 'react'
import ReactDOM from 'react-dom'

const useCustomState = (initialState) => {
  // 用useRef持久化状态，current值在组件多次渲染中保持不变
  const valueRef = useRef(initialState);
  // 用一个空状态触发重渲染
  const [, forceUpdate] = useState({});

  function setValue(newVal){
    // 支持函数式更新，和原生useState对齐
    const newValue = typeof newVal === 'function' ? newVal(valueRef.current) : newVal;
    valueRef.current = newValue;
    // 更新空状态，触发组件重渲染
    forceUpdate({});
  } 

  return [valueRef.current, setValue]; 
}

function App() {
  const [state, setState] = useCustomState(3)

  return (
    <>
      <h1>{state}</h1>
      <button onClick={() => setState(state + 1)}>Increment</button>
    </>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

关键说明 #

• useRef的current属性可以在组件的整个生命周期中保存值，不会因组件重渲染而重置。
• 通过更新一个空对象的useState状态，强制React重新渲染组件，这样组件就能读取到更新后的valueRef.current值。
• 增加了对函数式更新的支持，和原生useState的行为完全一致，比如你可以写setState(prev => prev + 1)来避免闭包问题。

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