Written in the beginning

  • Last year,CTOHe’s been telling me about itfacedPattern, but there wasn’t onegetTo the point of it
  • Wait for megetWhen I arrived, he was no longer working with me. It was a sad story

What to know before reading this article

  • What is thereact hooks ?
    • Hook is a new feature in React 16.8. It lets you use state and other React features without writing a class, such as:
import React, { useState } from 'react'; Const [count, setCount] = useState(0); function Example() {const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }Copy the code
  • What is thefacedMode (appearance mode)?
    • Appearance pattern: Provides a unified interface for accessing a set of interfaces in a subsystem. The facade pattern defines a high-level interface that makes subsystems easier to use.
  • What is customizationhooks?
    • The customhooksIt is a function whose name begins with “use” and inside the function can call other hooks, a common customizationhooksAs follows:
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;
}
Copy the code

This hook is used to call other hooks to determine whether they are online by passing in the friend ID.

The official start of the

  • facedPatterns are intended to provide a unified interface for accessing a set of interfaces in a subsystem
  • After we have accurately identified and segmented the business modules, it is likely that there will be a need to passreact hooksProvide more unified front-end interfaces
  • For example, in doIM Instant messagingOn the client side, we may need to re-determine whether we can view each other’s friends’ moments profile through a preview in a friend group
    • Business disassembly:
    • First get the uUID of the other party
    • Then check whether it is a friend (island) through the client database.
    • Then call the API interface to check whether you have the permission to view the other party’s moments
    • If the permission exists, the data will be pulled and displayed. If not, the data will be displayed-

The next step after dismantling the business – encapsulating customhook

  • It is a common requirement that checking the uUID of the other party in the client database should be a hook

  • Whether the API call has the right to view the uUID’s moments and a brief introduction should also be a hook

  • Finally, we need to package a large hook to assemble these two hooks. We first draw a business flow chart and dismantle several custom hooks

At this time, the problem comes. If we do not encapsulate the hooks, we will call these hooks or functions where the components are used, and then complete the business logic judgment through a series of processing judgments inside the components. However, the situation of checking each other’s friend circle in the group through the profile picture will be used in more than one place. So now you need to reuse this logic, and you need to use the faced mode

Use of faced mode

  • Provides a unified interface for accessing a set of interfaces in a subsystem

At this point, we should provide a hook to access these hooks, and finally reuse the logic in the business

  • Package unified externalhook. Used to access internal multiplehook
  • Faced mode External service scenarios:
    • The user clicks another person’s profile picture in the group
    • The user clicks on the comments section of moments – the friend’s avatar
    • The user clicks through the business card
    • Other scenarios in the future… The specific business scenarios are as follows:

So you probably know not only why React made hooks, but what is faced mode

  • throughfacedPatterns andreact hooksIn business system development, can greatly improve efficiency, and can strengthen the robustness of complex business system, single logichookA single logical back-end interface corresponding to complex business byfacedThe pattern uniformly provides an external interface to access internal subsystems

Write in the last

  • Design patterns are really important if you can understand them and use them in business systems. Most of the people I’ve seen in development just know about them but don’t actively use them. Maybe that’s why advanced development requires a deep understanding of design patterns

  • If you feel good, please give me a thumbs up and follow my official account: Front-end Peak