如何对React无状态函数/组件中的重复代码进行去重处理

解决方案 #

最优方案是将重复逻辑抽离为自定义React Hook，这是React官方为函数组件提供的原生逻辑复用方案，完全符合你保留无状态组件的要求，无需改造成类组件。

步骤1：定义公共自定义Hook

把所有重复的状态、计算逻辑封装到单独的Hook中：

import { useState } from 'react';
// 注意：如果useForm是第三方Hook（比如react-hook-form），请自行补充导入
export const useFormWithValidation = (props) => {
  const [submitted, setSubmitted] = useState(false);
  const form = useForm({ values: props.settings });

  const validated = props.callbacks.validate(form);
  const validations = {
    ...validated,
    submitted,
  };

  // 返回组件需要用到的所有变量和方法
  return {
    submitted,
    setSubmitted,
    form,
    validations
  };
};

步骤2：改造原有组件

直接在组件中调用自定义Hook即可，所有重复逻辑都被复用：

export const Foo = (props) => {
  const { submitted, setSubmitted, form, validations } = useFormWithValidation(props);
  return (
    ... my Foo component ...
  );
};

export const Bar = (props) => {
  const { submitted, setSubmitted, form, validations } = useFormWithValidation(props);
  return (
    ... my Bar component ...
  );
};

方案优势

• 完全保留函数组件的无状态特性，没有引入额外的类组件逻辑
• 后续公共逻辑迭代只需修改useFormWithValidation一处，所有调用的组件自动同步生效
• 没有额外的组件嵌套开销，比高阶组件、渲染属性等复用方案更简洁轻量

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