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接口调用查询是否有对方的朋友圈查看权限
  • 若是存在权限则拉取数据展现简介，若是不存在则展现 -

拆解业务后的下一步 - 封装自定义hook

• 经过对方的uuid在客户端数据库查询是否为好友关系，应该是一个hook，这是一个常见的需求
• 经过api调用是否有对方uuid的朋友圈查看权限以及简介，也应该是一个hook
• 最后咱们须要封装一个大的hook，去组装这两个hook,咱们先绘制一个业务流程图，而且拆解出几个自定义hook

这个时候问题来了，若是不封装 hook,那么咱们将要在组件使用的地方去调用这几个 hook或者函数，而后组件内部经过一系列处理判断去完成这个业务逻辑判断，但是这个经过头像查看群组内对方朋友圈的状况不止一个地方会用到，那么此时就须要复用这个逻辑,这里就须要用到 faced模式了

faced模式的使用

• 提供一个统一的接口，用来访问子系统中的一群接口

这个时候，咱们应该提供一个 hook，经过它去访问这几个 hook,最后在业务中去复用这个逻辑

• 封装统一对外的hook.用来访问内部的多个hook

• faced模式对外业务使用场景：

  • 用户点击群组内其余人头像
  • 用户点击朋友圈评论区 - 朋友的头像
  • 用户经过名片点击
  • 将来其余的场景...具体业务场景以下图所示:

这样，你或许不只明白了为何React会造出 hooks这个东西，还明白了什么是 faced模式

• 经过faced模式和react hooks的结合，在业务系统开发中，能够极大的提高效率，而且能够增强复杂业务系统的健壮性，单一逻辑的hook跟单一逻辑的后端接口对应，复杂的业务由faced模式统一提供对外的接口以访问内部的子系统

写在最后

• 设计模式，真的很是重要，前提是你能理解它而且用在业务系统中，我在开发中见过绝大多数的人都只是知道可是并不会主动利用它，这或许就是为什么高级开发须要深刻理解设计模式
• 若是感受写得不错，帮我点个赞吧，顺便关注一下个人公众号：前端巅峰