是一开始写的。CTO去年一直跟我提倡facedpattern，但是他当时没听懂。当我得到它时，他不再在我身边工作。这是一个悲伤的故事。阅读本文之前需要了解的知识点什么是reacthooks？Hook是React16.8的新特性。它允许您在不编写类的情况下使用状态和其他React功能，例如：importReact,{useState}from'react';functionExample(){//声明一个名为“count”的新状态变量const[count,setCount]=useState(0);return(
你点击了{count}次
setCount(count+1)}>点击我);}什么是面对模式（外观模式）？外观模式：为访问子系统中的一组接口提供统一的接口。Facade模式定义了一个高级接口，使子系统更易于使用。什么是自定义挂钩？自定义钩子是一个名称以“use”开头的函数。可以在函数内部调用其他Hooks。一个常见的自定义钩子如下：useEffect(()=>{functionhandleStatusChange(status){setIsOnline(status.isOnline);}ChatAPI.subscribeToFriendStatus(friendID,handleStatusChange);return()=>{ChatAPI.unsubscribeFromFriendStatus(friendID,handleStatusChange);};});returnisOnline;}这个钩子的作用是通过传入的好友id调用其他钩子判断是否在线。faced模式的正式启动，旨在为访问子系统中的一组接口提供一个统一的接口。在我们准确识别和划分业务模块之后，很可能会出现这个需求，需要通过reacthooks提供更多的前端统一接口，比如做IM即时通讯客户端时，我们可能在客户端端，需要在好友群中重新判断是否可以通过预览查看对方朋友圈的个人资料业务拆解：先获取对方的uuid，然后通过终端数据库查看是否是好友关系（孤岛）然后通过api接口调用查看是否有权限查看对方的朋友圈。如果有权限，会拉取数据展示介绍。如果不存在则显示-拆解业务包后的下一步定义钩子查询对方的uuid在客户端数据库中是否为好友关系。它应该是一个钩子。这是一个普遍的要求。应该也是一个钩子，通过API调用查看对方uuid朋友圈的权限和简介。最后，我们需要封装一个大钩子，将这两个钩子组装起来。我们先画一个业务流程图，拆解几个自定义的钩子。这时候，问题就来了。如果没有封装钩子，那么我们就去到组件使用的地方。调用这些钩子或者函数，然后通过组件内部的一系列处理判断来完成业务逻辑判断，但是通过头像查看对方在群里的朋友圈的情况会用到不止一个地方，所以这个时候需要复用这个逻辑，这里就需要faced模式。面向模式的使用为访问子系统中的一组接口提供了统一的接口。这时候我们就应该提供一个hook来访问这些hooks，最后在业务中De-reuse这个逻辑来封装一个统一的外部hook。它用于访问多个内部钩面模式。对外业务使用场景：用户点击群内其他人的头像，用户点击朋友圈评论区-用户通过名片点击好友头像的未来等场景。..具体的业务场景如下图所示：如此一来，你不仅可以理解React为什么要创建hooks，也可以理解什么是faced模式。通过faced模式和reacthooks的结合，在业务系统开发当中，可以大大提高效率，增强复杂业务系统的健壮性。单个逻辑挂钩对应于单个逻辑后端接口。对于复杂的业务，面向模式统一对外提供接口访问内部子系统，最后写设计模式真的很重要，前提是你能看懂并在业务系统中使用。我在开发中看到的大多数人只是知道它但不会主动使用它。这可能就是为什么高级开发需要深入了解设计模式的原因，如果感觉写的好，点个赞，关注我的公众号：前端巅峰
