React hooks與Faced pattern

時間 2021-05-07

標籤前端 react 數據庫後端設計模式 api 函數 spa 設計欄目 React 简体版

原文原文鏈接

寫在開頭

去年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模式（外觀模式）？react
- 外觀模式:提供一個統一的接口，用來訪問子系統中的一羣接口。外觀模式定義了一個高層的接口，讓子系統更容易使用。
什麼是自定義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接口調用查詢是否有對方的朋友圈查看權限
- 若是存在權限則拉取數據展現簡介，若是不存在則展現 -