React 无状态函数/组件中的重复代码删除

Question

我有很多无状态的 React 组件，它们都包含相同的（重复的）代码。

例子：

export const Foo = (props) => {
  const [submitted, setSubmitted] = useState(false);
  const form = useForm({ values: props.settings });

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

  return (
    ... my Foo component ...
  );
};

export const Bar = (props) => {
  const [submitted, setSubmitted] = useState(false);
  const form = useForm({ values: props.settings });

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

  return (
    ... my Bar component ...
  );
};

有没有办法可以以某种方式对重复的代码进行重复数据删除？ （ set/submitted的设置器/获取器、 form定义和validated / validations定义）。

PS：我需要组件是无状态的，所以我不能将组件转换为 class 并从基础 class 继承。

Answer 1

正如评论中所讨论的，自定义钩子在这里是完美的。 您当然需要根据<MyFoo />和<MyBar />的需要调整钩子的“API 表面”：

function useSubmittedValidation({ settings, callbacks }) {
  const [submitted, setSubmitted] = useState(false);
  const form = useForm({ values: settings });
  const validated = callbacks.validate(form);
  const validations = {
    ...validated,
    submitted,
  };
  return { form, submitted, setSubmitted, validations };
}

export const Foo = (props) => {
  const { submitted, setSubmitted, form, validations } = useSubmittedValidation(props);
  return <MyFoo />;
};

export const Bar = (props) => {
  const { submitted, setSubmitted, form, validations } = useSubmittedValidation(props);
  return <MyBar />;
};

Answer 2

提取大量重复代码的一种好方法是通过 HOC（高阶组件）。 例如，为了提取 state，您可以这样做：

const withSubmittedState = (WrappedComponent) => {
  const Component = () => {
  const [submitted, setSubmitted] = useState(false);
    return <WrappedComponent />;
  };

  return Component;
};

然后像这样导出 Foo 组件：

const Foo = (props) => {
  const form = useForm({ values: props.settings });

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

  return (
    ... my Foo component ...
  );
};

export withSubmittedState(Foo);

和 Bar 组件是这样的：

const Bar = (props) => {
  const form = useForm({ values: props.settings });

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

  return (
    ... my Bar component ...
  );
};

export withSubmittedState(Bar);

现在 Foo 和 Bar 组件都有一个submitted的 state。 请注意，根据应用程序的逻辑，您可能需要将此 state 作为道具传递给WrappedComponent 。