乐趣区

关于javascript:React-hooks与Faced-pattern

jiezi

写在结尾

  • 去年 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 模式对立提供对外的接口以拜访外部的子系统

写在最初

  • 设计模式，真的十分重要，前提是你能了解它并且用在业务零碎中，我在开发中见过绝大多数的人都只是晓得然而并不会被动利用它，这或者就是为何高级开发须要深刻了解设计模式
  • 如果感觉写得不错，帮我点个赞吧，顺便关注一下我的公众号：前端巅峰
退出移动版