https://juejin.cn/post/7223710471916388410 typescript

https://juejin.cn/post/7259929115481423909 字体美化

https://juejin.cn/post/7264556202138615864 更快访问静态资源

https://segmentfault.com/a/1190000045686345

高阶组件

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
interface WithLoadingProps {
  isLoading: boolean;
}

function withLoading<P extends WithLoadingProps>(
  Component: React.ComponentType<P>
): React.FC<P> {
  return function WithLoading(props: P) {
    const { isLoading, ...rest } = props;
    return isLoading ? (
      <div>Loading...</div>
    ) : (
      <Component {...(rest as P)} />
    );
  };
}

interface UserProps {
  name: string;
  age: number;
}

function User({ name, age }: UserProps) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{age}</p>
    </div>
  );
}

const UserWithLoading = withLoading(User);

function App() {
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 2000);
  }, []);
  return (
    <div>
      <UserWithLoading name="Alice" age={18} isLoading={isLoading} />
    </div>
  );
}

在上面的代码中，我们定义了一个名为 withLoading 的高阶组件，它接收一个组件作为参数，并返回一个新的组件。新的组件接收一个名为 isLoading 的布尔值属性，并在 isLoading 为 true 时显示 Loading…，否则渲染传入的组件。
我们还定义了一个名为 User 的函数组件，并使用 withLoading 高阶组件对其进行了包装。最后，在 App 组件中，我们渲染了 UserWithLoading 组件，并传入了 isLoading 属性。
在 React 应用中，为了提高代码的复用性，我们通常使用高阶组件（Higher Order Component，简称 HOC）来对组件进行包装。高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的组件

可是为什么不能直接用isloading变量判断输出什么,还得搞个组件出来啊

  1. 组件复用和单一责任原则
    当多个组件在它们的渲染逻辑中需要相同的条件检查（如显示加载状态）时，将这部分逻辑抽象到一个 HOC 中可以避免代码重复。这样，每个组件可以专注于它的主要职责，而不是如何处理加载状态。这符合单一责任原则，即一个组件或模块应该只有一个改变的理由。

  2. 保持组件简洁
    如果你的项目中有多个地方需要处理加载状态，直接在每个组件里管理 isLoading 可能会导致很多重复代码。使用 HOC，你可以将加载逻辑集中管理，让主组件保持简洁和专注于它应该做的事情。

  3. 可测试性和可维护性
    通过使用 HOC 封装加载状态的处理，可以更容易地编写单元测试，因为你可以分别测试加载逻辑和组件的业务逻辑。此外，如果加载逻辑需要更新（比如添加额外的动画或者更改视觉展示），你只需修改 HOC 代码，而不必触及使用该 HOC 的所有组件。

  4. 条件渲染的复杂性管理
    在复杂的应用中，组件可能不仅仅需要根据是否正在加载来改变显示，还可能需要考虑错误状态、空状态等多种情况。HOC 可以帮助管理这些不同状态的渲染逻辑，而不是将所有这些逻辑塞进每一个组件中。

  5. 代码分离和关注点分离
    使用 HOC 可以将逻辑和 UI 分离开来，特别是在大型应用中，这种分离可以使得代码更加模块化，易于管理和扩展。你可以将特定的行为封装在 HOC 中，并在多个组件间复用这些行为。

示例对比
不使用 HOC，直接在组件中处理：

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

function User({ name, age, isLoading }) {
    if (isLoading) {
        return <div>Loading...</div>;
    }
    return (
        <div>
            <h2>{name}</h2>
            <p>{age}</p>
        </div>
    );
}

使用 HOC：

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

// HOC 抽象了加载逻辑
const UserWithLoading = withLoading(User);

// 组件专注于展示数据
function User({ name, age }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>{age}</p>
        </div>
    );
}

美化