精读《正交的 React 组件》

1 引言

搭配了合适的设计模式的代码，才可拥有良好的可维护性，The Benefits of Orthogonal React Components 这篇文章就重点介绍了正交性原理。

所谓正交，即模块之间不会相互影响。想象一个音响的音量与换台按钮间若是不是正交关系，控制音量同时可能影响换台，这样的设备很难维护：

前端代码也同样，UI 与数据处理逻辑分离就是一种符合正交原则的设计，这样有利于长期代码质量维护。

2 概述

一个拥有良好正交性的 React App 会按照以下模块分离设计：

1. UI 元素(展现型组件)。
2. 取数逻辑(fetch library, REST or GraphQL)。
3. 全局状态管理(redux)。
4. 持久化（local storage, cookies）。

文中经过两个例子说明。

让组件与取数逻辑正交

好比一个展现雇员列表组件 <EmployeesPage>:

import React, { useState } from "react";
import axios from "axios";
import EmployeesList from "./EmployeesList";

function EmployeesPage() {
  const [isFetching, setFetching] = useState(false);
  const [employees, setEmployees] = useState([]);

  useEffect(function fetch() {
    (async function() {
      setFetching(true);
      const response = await axios.get("/employees");
      setEmployees(response.data);
      setFetching(false);
    })();
  }, []);

  if (isFetching) {
    return <div>Fetching employees....</div>;
  }
  return <EmployeesList employees={employees} />; } 复制代码

这样设计看上去没问题，但其实违背了正交原则，由于 EmployeesPage 既负责渲染 UI 又关心取数逻辑。正交的写法以下：

import React, { Suspense } from "react";
import EmployeesList from "./EmployeesList";

function EmployeesPage({ resource }) {
  return (
    <Suspense fallback={<h1>Fetching employees....</h1>}>
      <EmployeesFetch resource={resource} />
    </Suspense>
  );
}

function EmployeesFetch({ resource }) {
  const employees = resource.employees.read();
  return <EmployeesList employees={employees} />;
}
复制代码

Suspense 将 loading 状态剥离到父级组件，所以子组件只须要关心如何用数据，不需关心如何取数据（以及 loading 态）。

让组件与滚动监听正交

好比一个滚动到必定距离就出现 "jump to top" 的组件 <ScrollToTop>，可能会这么实现：

import React, { useState, useEffect } from "react";

const DISTANCE = 500;

function ScrollToTop() {
  const [crossed, setCrossed] = useState(false);

  useEffect(function() {
    const handler = () => setCrossed(window.scrollY > DISTANCE);
    handler();
    window.addEventListener("scroll", handler);
    return () => window.removeEventListener("scroll", handler);
  }, []);

  function onClick() {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  }

  if (!crossed) {
    return null;
  }
  return <button onClick={onClick}>Jump to top</button>;
}
复制代码

能够看到，在这个组件中，按钮与滚动状态判断逻辑混合在了一块儿。若是咱们将 “滚动到必定距离就渲染 UI” 抽象成通用组件 IfScrollCrossed 呢？

import { useState, useEffect } from "react";

function useScrollDistance(distance) {
  const [crossed, setCrossed] = useState(false);

  useEffect(
    function() {
      const handler = () => setCrossed(window.scrollY > distance);
      handler();
      window.addEventListener("scroll", handler);
      return () => window.removeEventListener("scroll", handler);
    },
    [distance]
  );

  return crossed;
}

function IfScrollCrossed({ children, distance }) {
  const isBottom = useScrollDistance(distance);
  return isBottom ? children : null;
}
复制代码

有了 IfScrollCrossed，咱们就能专一写 “点击按钮跳转到顶部” 这个 UI 组件了：

function onClick() {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}

function JumpToTop() {
  return <button onClick={onClick}>Jump to top</button>;
}
复制代码

最后将他们拼装在一块儿：

import React from "react";

// ...

const DISTANCE = 500;

function MyComponent() {
  // ...
  return (
    <IfScrollCrossed distance={DISTANCE}> <JumpToTop /> </IfScrollCrossed>
  );
}
复制代码

这么作，咱们的 <JumpToTop> 与 <IfScrollCrossed> 组件就是正交关系，并且逻辑更清晰。不只如此，这样的抽象使 <IfScrollCrossed> 能够被其余场景复用：

import React from "react";

// ...

const DISTANCE_NEWSLETTER = 300;

function OtherComponent() {
  // ...
  return (
    <IfScrollCrossed distance={DISTANCE_NEWSLETTER}> <SubscribeToNewsletterForm /> </IfScrollCrossed>
  );
}
复制代码

Main 组件

上面例子中，<MyComponent> 就是一个 Main 组件，Main 组件封装一些脏逻辑，即它要负责不一样模块的组装，而这些模块之间不须要知道彼此的存在。

一个应用会存在多个 Main 组件，它们负责拼装各类做用域下的脏逻辑。

正交设计的好处

• 容易维护： 正交组件逻辑相互隔离，不用担忧连带影响，所以能够放心大胆的维护单个组件。
• 易读： 因为逻辑分离致使了抽象，所以每一个模块作的事情都相对单一，很容易猜想一个组件作的事情。
• 可测试： 因为逻辑分离，能够采起逐个击破的思路进行单测。

权衡

若是不采用正交设计，由于模块之间的关联致使应用最终变得难以维护。但若是将正交设计应用到极致，可能会多处许多没必要要的抽象，这些抽象的复用仅此一次，形成过分设计。

3 精读

正交设计必定程度能够理解为合理抽象，彻底不抽象与过分抽象都是不可取的，所以列举了四块须要抽象的要点：UI 元素、取数逻辑、全局状态管理、持久化。

全局状态管理注入到组件，就是一种正交的抽象模式，即组件不用关心数据从哪来，而直接使用数据，而数据管理彻底交由数据流层管理。

取数逻辑每每是可能被忽略的一环，不管是像原文中直接关心到 fetch 方法的 UI 组件，仍是利用取数工具库关心了 loading 状态：

import useSWR from "swr";

function Profile() {
  const { data, error } = useSWR("/api/user", fetcher);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}
复制代码

虽然将取数生命周期封装到自定义 hook useSWR 中，但 error 信息对 UI 组件来讲就是一个脏数据：这让这个 UI 组件不只要渲染数据，还要担忧取数是否会失败，或者是否在 loading 中。

好在 Suspense 模式解决了这个问题：

import { Suspense } from "react";
import useSWR from "swr";

function Profile() {
  const { data } = useSWR("/api/user", fetcher, { suspense: true });
  return <div>hello, {data.name}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>loading...</div>}> <Profile /> </Suspense>
  );
}
复制代码

这样 <Profile> 只要专一于作数据渲染，而不用担忧 useSWR('/api/user', fetcher, { suspense: true }) 这个取数过程发生了什么、是否取数失败、是否在 loading 中。由于取数状态由 Suspense 管理，而取数是否意外失败由 ErrorBoundary 管理。

合理的抽象使组件逻辑变得更简单，从而组件嵌套使用使不用担忧额外影响。尤为在大型项目中，不要担忧正交抽象会使原本就不少的模块数量再次膨胀，由于相比于维护 100 个相互影响，内部逻辑复杂的模块，维护 200 个职责清晰，相互隔离的模块也许会更轻松。

4 总结

从正交设计角度来看，Hooks 解决了状态管理与 UI 分离的问题，Suspense 解决了取数状态与 UI 分离的问题，ErrorBoundary 解决了异常与 UI 分离的问题。

在你看来，React 还有哪些逻辑须要与 UI 分离？分别使用哪些方法呢？欢迎留言。

讨论地址是：精读《正交的 React 组件》 · Issue #221 · dt-fe/weekly

若是你想参与讨论，请 点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）