从解耦合到映射，改善React业务组件代码质量

2023-09-24 06:38:23

引入

在开发React应用程序时，经常会遇到编写业务组件的情况。业务组件通常比较复杂，需要处理各种各样的逻辑。如果组件没有编写好，很容易变得难以维护和复用。本文将通过一个Tag组件的例子，介绍如何通过解耦合和映射的方式，改善React业务组件的代码质量。

差的组件使用方式

以下是一个差的Tag组件的示例：

const Tag = (props) => {
  const { tag, onClick } = props;

  return (
    <div className="tag" onClick={onClick}>
      {tag}
    </div>
  );
};

这个组件存在以下问题：

逻辑和表示混杂在一起。 组件的逻辑和表示混杂在一起，导致组件难以维护和复用。例如，如果要改变组件的样式，就需要修改组件的逻辑。
组件难以复用。 这个组件只能用于渲染标签，无法复用于其他目的。

好的组件

以下是一个好的Tag组件的示例：

// 定义一个表示层的组件
const TagView = (props) => {
  const { tag, onClick } = props;

  return (
    <div className="tag" onClick={onClick}>
      {tag}
    </div>
  );
};

// 定义一个逻辑层的组件
const TagLogic = (props) => {
  const { tag, onClick } = props;

  // 在这里处理组件的逻辑

  return {
    view: <TagView tag={tag} onClick={onClick} />,
  };
};

// 定义一个业务组件
const Tag = (props) => {
  const { tag, onClick } = props;

  const { view } = TagLogic({ tag, onClick });

  return view;
};