React中如何实现通用代码与变量复用 复用表单通用逻辑

优先采用核心逻辑抽离为自定义Hook的方案，完全适配React函数式编程范式，改造成本极低，同时彻底规避动态渲染的性能问题，不需要硬改GeneralForm适配所有差异化样式。

• 第一步：逻辑与UI解耦拆分
  把原GeneralForm中与UI渲染无关的核心逻辑全部抽离，封装为独立的自定义Hook（可命名为useFormCore），抽离的逻辑包括两部分：

  • 基于Map结构的全字段状态管理能力：含初始状态生成、字段值更新、表单重置、基础规则校验等通用方法
  • 字段联动禁用逻辑：即根据JSON配置规则、当前用户输入值自动计算各字段启用/禁用状态的逻辑
    抽离后的Hook不包含任何表单UI渲染代码，入参仍然沿用之前定义的字段JSON配置，返回值对外暴露字段状态集合、字段更新方法、各字段禁用状态、表单提交方法等可直接绑定到静态表单元素的属性和方法。

• 第二步：静态表单直接复用Hook能力
  开发样式差异大的复杂表单时，完全采用静态JSX编写表单结构、自定义样式和交互，不需要走动态配置生成的渲染路径，只需要在组件顶部调用useFormCore传入对应表单的字段配置，直接从返回值中取对应字段的状态、变更回调、禁用属性绑定到自定义的表单控件上即可。
  参考实现示例：

  // 核心逻辑Hook，无任何UI相关代码
  import { useCallback, useMemo, useState } from 'react'
  function useFormCore(fieldConfig) {
    // 复用原GeneralForm的Map状态初始化逻辑
    const [fieldValues, setFieldValues] = useState(() => {
      const initMap = new Map()
      fieldConfig.forEach(field => initMap.set(field.name, field.defaultValue ?? ''))
      return initMap
    })
  
    // 复用原GeneralForm的字段禁用联动计算逻辑
    const disabledMap = useMemo(() => {
      const result = new Map()
      fieldConfig.forEach(field => {
        result.set(field.name, checkFieldDisabled(field, fieldValues))
      })
      return result
    }, [fieldConfig, fieldValues])
  
    const setFieldValue = useCallback((fieldName, value) => {
      setFieldValues(prev => new Map(prev).set(fieldName, value))
    }, [])
  
    return { fieldValues, disabledMap, setFieldValue }
  }
  
  // 完全静态编码的自定义样式表单
  function SpecialStyleForm() {
    // 仅复用核心逻辑，UI完全自主控制
    const { fieldValues, disabledMap, setFieldValue } = useFormCore(bizFormConfig)
    return (
      <div className="custom-form-layout">
        {/* 任意自定义结构、任意第三方控件、任意特殊样式都可以直接写 */}
        <MyBrandInput
          value={fieldValues.get('userName')}
          disabled={disabledMap.get('userName')}
          onChange={val => setFieldValue('userName', val)}
        />
        <SpecialCascaderComponent
          value={fieldValues.get('address')}
          disabled={disabledMap.get('address')}
          onChange={val => setFieldValue('address', val)}
        />
      </div>
    )
  }
  

• 第三步：原有GeneralForm兼容改造
  把原有的GeneralForm改成基于useFormCore实现的默认UI版本，简单、样式统一的常规表单仍然可以用JSON配置生成的方式使用，不需要做任何业务侧改动，新旧两套表单场景可以无缝共存。

• 不推荐改造GeneralForm支持所有差异化表单：该方案需要为每一种样式差异增加自定义渲染插槽、样式透传props，最终会导致组件props爆炸、逻辑分支冗余，维护成本随表单数量增长持续升高，且动态渲染的路径仍然存在，顾虑的运行时性能问题无法彻底解决。
• 不需要套用OOP继承模式：自定义Hook是React函数式组件原生的逻辑复用方案，比类继承的耦合度更低、灵活度更高，完全可以覆盖需要的逻辑复用诉求。
• 额外性能收益：静态JSX渲染不存在动态map遍历生成节点的调和开销，还可以在Hook基础上扩展字段细粒度订阅能力，实现单个字段值变化只触发对应控件重渲染，性能表现会优于原动态生成的GeneralForm。

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