React多状态场景下减少组件重渲染的最优方案咨询

问题背景 #

• 开发需求：组件内置带n个输入字段的筛选表单，同组件渲染根据筛选条件更新的表格，仅点击筛选按钮时才需要触发筛选逻辑、更新表格数据
• 已尝试4种实现方案，核心诉求是避免不必要的全组件重渲染，同时保证代码易维护、符合React开发规范

已尝试的4种方案梳理 #

• 方案1：每个输入字段单独绑定父组件本地状态，输入变化同步更新状态
  • 存在问题：输入过程会触发整个父组件全量重渲染，属于无意义性能损耗
• 方案2：封装独立受控CustomInput子组件，输入状态存在子组件内部，点击筛选按钮时通过ref获取各输入项的值
  • 示例代码如下：
    父组件实现

    const formRef = useRef()
    
    const handleFilter= () =>{
      // 仅需获取输入值提交，无需操作DOM
      console.log(formRef.current.a.value)
      console.log(formRef.current.b.value)
      console.log(formRef.current.c.value)
      // 基于查询参数调用接口，更新表格展示数据
    }
    
    // 组件渲染部分
    <div>
      <Form ref={formRef}>
        <CustomInput name='a'/>
        <CustomInput name='b'/>
        <CustomInput name='c'/>
        <Button onClick={handleFilter}>筛选</Button>
      </Form>
      <Table>
        仅点击筛选按钮后，才根据表单筛选条件展示对应数据
      </Table>
    </div>
    

    CustomInput子组件实现

    const CustomInput = (props) =>{
      const [value, setValue] = useState('')
    
      return(
        <input 
          name={props.name}
          value={value}
          onChange = {(e) => setValue(e.target.value)}
        />
      )
    }
    

• 方案3：将Form抽离为独立组件，内部引入CustomInput，父组件引入抽离后的Form组件
  • 存在问题：需要做两层状态提升，代码冗余度高
• 方案4：使用Context、Redux或其他全局状态管理工具承载表单状态
  • 存在问题：对于简单筛选表单来说属于过度设计，增加不必要的包体积和心智负担

核心问题答疑 #

方案2能不能直接用？符合React官方规范吗？ #

放心用，完全符合规范，没有任何问题。
这个方案的优点非常实在：输入过程中的重渲染被严格限制在单个输入组件内部，根本不会触发父组件和表格组件的无效更新，完全避开了性能损耗问题；同时逻辑直白代码量小，后续加字段、改输入逻辑都很好维护。
唯一要补的细节是示例代码没写全ref透传的逻辑：要给CustomInput包一层forwardRef，配合useImperativeHandle把组件内部维护的value暴露给父组件，别直接读原生DOM的value——不然以后你给输入框加值格式化、输入校验这类逻辑的时候，父组件拿到的值会和输入组件实际使用的值对不上。

有没有更优的方案？ #

如果你的筛选表单字段不多（10个以内）、没有复杂的跨字段校验、也不需要输入实时触发搜索，方案2就是性价比最高的选择，没必要硬上其他花里胡哨的技术栈。
要是后续表单复杂度提升，可以按需调整：

• 如果要做输入联动、实时筛选，直接把Form单独抽成组件，表单状态存在Form组件内部就行，更新表格数据就调用父组件传下来的回调，根本不需要做两层状态提升，也用不着全局状态
• 如果字段超过20个、有复杂跨字段校验、多步表单这类需求，直接用React Hook Form这类成熟表单库就行，原生就支持最小粒度的重渲染，不用自己写一堆ref透传的逻辑，鲁棒性比自己手写的封装好很多，API也简单。

别一上来就给简单筛选表单套Context、Redux这类全局状态方案，全局状态更新默认会触发所有订阅组件重渲染，反而更容易出性能问题，维护成本还高。

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