React TypeScript函数组件中使用大量useState是否符合编码规范？

单个函数组件内定义20个以上的useState本身没有语法错误，但绝大多数场景下都意味着你的组件设计存在优化空间，不符合高内聚低耦合的编码规范。你可以按照以下优先级逐步优化状态管理逻辑：

• 优先做组件拆分
  如果一个组件承载了过多职责，比如同时包含表单、列表、弹窗、分页等多个独立模块的逻辑，优先按功能模块拆分成多个独立的子组件。每个子组件只维护自身相关的状态，父组件仅管理跨子组件共享的状态，就能大幅减少单个组件的状态数量。
• 合并关联度高的状态
  对于逻辑上强关联、总是同时更新的状态，建议合并为单个对象状态存储。比如用户的姓名、年龄、邮箱三个字段，不需要拆成三个useState，可以合并为：

  interface UserInfo {
    name: string;
    age: number;
    email: string;
  }
  const [userInfo, setUserInfo] = useState<UserInfo>({name: '', age: 0, email: ''})
  

  更新时只需要用扩展运算符保留原有属性即可：setUserInfo(prev => ({...prev, name: '新姓名'}))。如果状态更新逻辑复杂、有较多分支判断，可以替换为useReducer，把状态更新逻辑统一收敛到reducer函数中，组件内仅通过dispatch触发更新，进一步简化组件代码。
• 抽离自定义Hook封装独立逻辑
  如果你有多个useState是服务于同一套业务逻辑的，比如搜索相关的关键词、加载状态、结果列表、分页参数，可以把这部分逻辑抽成自定义Hook：

  const useSearch = () => {
    const [keyword, setKeyword] = useState('');
    const [loading, setLoading] = useState(false);
    const [result, setResult] = useState<Item[]>([]);
    const [pageNum, setPageNum] = useState(1);
  
    const handleSearch = async () => {
      setLoading(true);
      // 搜索请求逻辑
      const res = await fetchSearchResult(keyword, pageNum);
      setResult(res);
      setLoading(false);
    }
  
    return {keyword, setKeyword, loading, result, pageNum, setPageNum, handleSearch}
  }
  

  组件内只需要一行代码就能引入所有相关状态和方法，既减少了组件内的冗余代码，也方便同逻辑在其他组件复用。
• 按需引入状态管理库
  如果大量状态是需要跨多层组件共享的，可以根据项目复杂度选择Zustand、Jotai、Redux等状态管理库统一维护，避免状态在组件树中层层传递。

最后补充判断标准：如果优化后剩下的useState确实都是当前组件独有的、无法拆分或合并的独立状态，那么即使数量多一些也完全可以接受，编码规范的核心目标是保证代码逻辑清晰、可维护，不必为了刻意减少useState的数量强行引入不必要的复杂方案。

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