React hooks与Faced pattern

Posted 2021-08-21 Peter谭老师

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React hooks与Faced pattern相关的知识，希望对你有一定的参考价值。

写在开头

去年CTO一直跟我在宣扬faced模式，但是当时没有get到它的点
等我get到的时候，他已经不在我身边工作了，真是一个悲伤的故事

阅读本文前需要先了解的知识点

什么是react hooks ?
- Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性,例如:

   import React, { useState } from \'react\';

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

什么是faced模式（外观模式）？
- 外观模式:提供一个统一的接口，用来访问子系统中的一群接口。外观模式定义了一个高层的接口，让子系统更容易使用。
什么是自定义hooks?
- 自定义hooks它是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook,一个常见的自定义hooks如下：

import { useState, useEffect } from \'react\';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

这个hook的作用是：通过传入的好友id,调用其他的hook，来判断其是否在线。

正式开始

faced模式意在提供一个统一的接口，用来访问子系统中的一群接口
在我们精确的识别、划分了业务模块之后，很可能就会出现这种需求，需要通过react hooks提供更多的前端统一接口
例如在做IM即时通讯客户端的时候，我们可能会在客户端，需要在一个好友群组重判断是否能通过预览查看对方的朋友圈简介
- 业务拆解：
- 首先获取对方的uuid
- 再通过客户端数据库查询是否为好友关系（岛屿）
- 再通过api接口调用查询是否有对方的朋友圈查看权限
- 如果存在权限则拉取数据展示简介，如果不存在则展示 -