# 🔥[译] 正交React组件的好处

正交性是几何学中的术语，互为直角的直角坐标系就具有正交性；在计算技术中表示不依赖性或解耦性。非正交的系统意味着系统中各组件互相高度依赖，这类系统中是不再有局部修正的情况了。

# 1. 为什么好的系统设计是重要的？

在5年前，我正在为一家欧洲初创公司开发跨平台移动应用。初期的功能是易于实现的，进展顺利。

6个月过去，需要不断的在现有功能上添加新的功能，随着时间的推移，对现有模块的更改越来越困难。

在部分需求上，开始拒绝某些新的功能和更新，因为它们将需要太多的时间实施。这个故事以移动应用程序完全重写为原生应用而告终，主要是因为进一步的维护非常的困难。

我将上述问题归咎于跨平台框架中的错误，归咎于客户端需求变更。但这不是主要问题，我没有意识到一点，我一直在于高度耦合的模块组件做战，就像堂吉柯德大战风车一样。

我忽略了组件易于更改的特性。我未遵循良好的设计原则，没有赋予组件适应潜在的变化的特性。学习设计原则，一个特别有影响力的正交原理，它可以隔离由于不同原因而变化的事物。

# 2. 正交组件

如果A和B正交的，则更改A不会更改B（反之亦然）。这就是正交性的概念。在广播设备中，音量和电台选择控件是正交的。音量控制仅更改音量，而电台选择控件仅更改接收到的电台。

想象一下广播设备坏了，音量控制可更改音量，但也可修改选定的广播电台。音量控制和电台选择控制不是正交的：音量控制会产生副作用。当你尝试向紧密耦合的组件中添加更改时，也会发生相同的情况：你不得不面对更改产生的副作用。

如果一个组件的更改不影响其他组件，则两个或多个组件正交。例如，显示文章列表的组件应与获取文章的逻辑正交。

一个好的React应用程序设计是正交的：

UI元素
全局状态管理
持久性逻辑（本地存储，cookie）
获取数据（fetch library, REST or GraphQL）

将组件隔离，并独立封装。这将使你的组件正交，并且你所做的任何更改都将被隔离，并且仅集中在一个组件上。这就是可预测且易于开发的系统的诀窍。

# 3.使组件正交以获取获取

让我们来看看下面的例子：

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} />;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在以上代码中<EmployeesPage>通过axios库，执行GET请求获取数据。

如果以后从axios和REST切换到GraphQL会发生什么？如果应用程序具有数十个与获取数据逻辑耦合的组件，则必须手动更改所有组件。其实有更好的方法，让我们从组件中分离出获取数据逻辑细节。

一个很好的方法是使用React的新功能Suspense：

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} />;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

现在，直到<EmployeesFetch>读取异步资源之前，<EmployeesPage>都会挂起.

重要的是<EmployeesPage>与获取数据逻辑正交。<EmployeesPage>不在乎axios是否实现抓取，你可以轻松地将axios更改为本地获取、或迁移为GraphQL：<EmployeesPage>不受影响。

React：Suspense 文档 (opens new window)

# 4.使视图与滚动监听器正交

假设您你要跳转到顶部按钮，以在用户向下滚动500px以上时显示。单击该按钮时，页面将自动滚动到顶部。

<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>;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<ScrollToTop>实现滚动监听器并呈现一个将页面滚动到顶部的按钮，问题在于这些概念可能会以不同的形式变化。

更好的正交设计应将滚动监听器与UI隔离，让我们将滚动监听器逻辑提取到自定义钩子useScrollDistance（）中：

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后，在组件<IfScrollCrossed>中使用useScrollAtBottom（）：

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

1
2
3
4

<IfScrollCrossed>仅在用户滚动特定距离时才显示，最后，这是单击时滚动到顶部的按钮：

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

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

1
2
3
4
5
6
7
8
9
10

现在，如果你想使一切正常工作，只需将<JumpToTop>放在<IfAtBottom>的中即可：

import React from 'react';
// ...
const DISTANCE = 500;

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

1
2
3
4
5
6
7
8
9
10
11
12

重要的是<IfScrollCrossed>隔离滚动监听器，UI元素的更改也隔离在<JumpToTop>组件中，在这里滚动监听器逻辑和UI元素是正交的。另一个好处是你可以将<IfScrollCrossed>与任何UI结合使用。例如，当用户向下滚动300px时，您可以显示新闻表单：

import React from 'react';
// ...
const DISTANCE_NEWSLETTER = 300;

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