编写出色的 React 组件的秘诀

我要坦白一件事。我没有为我的 React 组件写过任何测试。是的，你没看错，一个也没有。你可能想知道我是如何跟踪包含众多组件的复杂 React 项目的。以下是我的小技巧：

始终编​​写无需滚动即可阅读的 React 组件。

根据经验，如果你不滚动屏幕就无法阅读某个 React 组件，那么我敢打赌它肯定做了不止一件事。它有不止一项职责，不止一个目的。

React 中的思考

您要做的第一件事是在模拟中的每个组件（和子组件）周围绘制框并为它们命名。

这是 React 文档中的实际引用，显然每个人都忘记阅读了。

如果你遵循这个建议，你编写的每个组件都只做一件事，只服务于一个目的。如果它最终变得庞大，就应该分解成更小的子组件。

那么那些操作数据的复杂函数呢？这也很简单：我只需创建一个包含所有逻辑的纯函数，将其保存在一个文件中，然后在我的 React 组件中使用它即可。

让我们看一些代码

假设我想将 React Context 添加到我的一个组件中。

const AwesomeComponent = (props) => {
  const defaults = {
    mode: 'dark',
  };
  const cache = {
    mode: local.get('theme.mode'),
  };
  const initialTheme = merge(defaults, cache);
  const [theme, setTheme] = useState(initialTheme);

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <div className="awesome-component">
        <div>everything else...</div>
      </div>
    </ThemeContext.Provider>
  );
};

组件的第一部分使用了useStateReact hook。它还使用从一些选项缓存值中获取的默认值来初始化状态。

第一次改进

默认值实际上会随着时间的推移而增长到许多其他选项，而不仅仅是mode。让我们编写一个初始化状态的函数。该函数只有一个目的：初始化状态。

const AwesomeComponent = (props) => {
  const [theme, setTheme] = useState(themable());

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <div className="awesome-component">
        <div>everything else...</div>
      </div>
    </ThemeContext.Provider>
  );
};

第二次改进

该组件的功能仍然超出了它应有的范围。让我们将那些难以阅读的 React 上下文代码移到一个单独的组件中，并在主组件中直接实现它。这样，我们就不用关心上下文是如何初始化的，而只关心上下文是否已经初始化。

const AwesomeComponent = (props) => {
  return (
    <Theme>
      <div className="awesome-component">
        <div>everything else...</div>
      </div>
    </Theme>
  );
};

更多改进

如果你在 React 中也开始这样思考，你就会注意到这些细微的变化在你的项目中随处可见。你的项目也会变得越来越好。

最后的想法

代码混乱

我们都犯过这种错误。初级开发者、高级开发者、全栈开发者，我们都曾用面向对象编程 (OOP) 写过“上帝类”或写过巨大的 React 组件，却没有根据用途进行拆分。

但这种情况必须改变，否则你正在进行的复杂项目将变成一个复杂的怪物项目。

而且它必须快速改变。所以下次你打算写一些 React 组件、钩子或者一个简单的函数时，为什么不把它分成多个文件，每个文件只负责一个功能呢？编程的世界将会变得更加美好。