如何减少React项目中useState hooks数量并优化状态管理？

当前模式的核心问题 #

你当前遇到的维护困难本质来自两个常见的错误实践：

• 同业务域的状态拆分过碎：编辑器相关的editor、readOnly、inputValue、category本身是联动的关联状态，拆成多个独立useState+单独setter，自然每次操作需要调用多次set方法，逻辑散落在各个组件中难以追踪
• Context粒度不合理：所有编辑器状态塞在同一个Context中，任意单个属性变化都会导致所有消费该Context的组件重渲染，同时Context中混杂了太多不需要全局共享的临时状态

可直接落地的优化方案 #

1. 用useReducer收敛关联状态的更新逻辑 #

useReducer的核心逻辑非常简单：把同一个业务域下所有状态更新的逻辑统一收敛到一个reducer函数中，组件只需要触发动作，不需要关心要更新哪几个状态，完全匹配你当前的场景。
示例适配你现有代码的改造如下：
首先定义reducer逻辑：

type EditorState = {
  editor: string;
  readOnly: boolean;
  inputValue: string;
  category: string;
}

type EditorAction = 
  | { type: 'SELECT_NOTE', payload: INote }
  | { type: 'RESET_EDITOR' }
  | { type: 'UPDATE_FIELD', payload: Partial<EditorState> }

const editorReducer = (state: EditorState, action: EditorAction): EditorState => {
  switch(action.type) {
    case 'SELECT_NOTE':
      const note = action.payload
      return {
        editor: note.data.value,
        readOnly: true,
        inputValue: note.data.name,
        category: note.data.category
      }
    case 'RESET_EDITOR':
      return {
        editor: '',
        readOnly: false,
        inputValue: '',
        category: ''
      }
    case 'UPDATE_FIELD':
      return {...state, ...action.payload}
    default:
      return state
  }
}

改造EditorContextProvider：

export const EditorContext = createContext<{
  state: EditorState,
  dispatch: React.Dispatch<EditorAction>
}>({} as any);

export const EditorContextProvider = ({ children }: EditorContextProviderProps) => {
  const [state, dispatch] = useReducer(editorReducer, {
    editor: '',
    readOnly: false,
    inputValue: '',
    category: ''
  })
  return (
    <EditorContext.Provider value={{ state, dispatch }}>
      {children}
    </EditorContext.Provider>
  )
}

改造后你的onClick逻辑直接简化为：

const { dispatch: editorDispatch } = useContext(EditorContext);
const onClick = (note: INote) => {
  SetAddNote(false);
  SetNote(note);
  onSelected(note)
  editorDispatch({type: 'SELECT_NOTE', payload: note})
}

后续如果要修改选中笔记的状态更新逻辑，只需要修改reducer中SELECT_NOTE分支的代码即可，不需要修改任何组件内的逻辑。

2. 按作用域拆分状态，避免滥用Context #

严格区分状态的作用域，不要把所有状态都提升到全局Context：

• 全局状态：用户信息、全局配置等全应用通用的状态，才适合放在全局Context/状态管理库
• 模块级状态：比如笔记编辑器的状态，只在笔记业务模块使用，就放在模块根组件或者模块级Context，不要放全局
• 组件本地状态：比如单个弹窗的开关、临时输入值，直接放在组件内部的useState即可，不需要向上传递

如果确实需要Context跨层传值，可进一步把Context拆分为状态Context和dispatchContext，dispatch是稳定不变的，消费dispatch的组件不会因为状态变化触发不必要的重渲染。

3. 合并同维度的本地状态 #

你组件内的inputValue、category、color属于同一个表单维度的关联状态，完全可以合并为单个对象状态，不会增加复杂度，反而减少了需要维护的setter数量：

const [formState, setFormState] = useState({
  inputValue: '',
  category: '',
  color: ''
})
// 单个字段更新
setFormState(prev => ({...prev, inputValue: '新值'}))
// 批量更新
setFormState(prev => ({...prev, inputValue: 'xxx', category: 'yyy'}))

后续扩展方案 #

如果项目规模继续增大，可尝试引入轻量状态管理库Zustand，它不需要嵌套Provider，也不会有Context的重渲染问题，API非常简洁，学习成本远低于Redux，完全适配中小项目的状态管理需求。

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