React hooks and Faced pattern

Write at the beginning

• Last year CTO has been advocating the faced model with me, but at that time there was no get to its point.
• By the time I get , he was no longer working by my side. What a sad story

Knowledge points you need to know before reading this article

• What is react hooks ?

  • Hook is a new feature of React 16.8. It allows you to use state and other React features without writing classes, such as:

   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>
  );
}

• What is faced mode (appearance mode)?

  • Appearance mode: Provide a unified interface to access a group of interfaces in the subsystem. The appearance mode defines a high-level interface to make the subsystem easier to use.

• What is custom hooks ?

  • Custom hooks is a function whose name starts with "use". Other hooks can be called inside the function. A common custom hooks as 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;
}

The hook of this 06093c531efdb8 is to call other hook through the incoming friend id to determine whether it is online.

Officially begin

• faced mode is intended to provide a unified interface to access a group of interfaces in the subsystem
• After we have accurately identified and divided the business modules, this kind of demand is likely to arise, and we need to provide more front-end unified interfaces react hooks

• For example, when doing IM instant messaging client, we may need to re-judge in a friend group on the client if we can view the profile of the other party’s circle of friends through the preview

  • Business dismantling:
  • First get the other party's uuid
  • Then check whether it is a friend relationship (island) through the client database
  • Then call through the api interface to query whether there is the other party’s circle of friends view permission
  • If there is permission, pull the data to display the introduction, if not, display -

The next step after dismantling the business-custom hook

• Query whether it is a friend relationship in the client database through the other party's uuid, it should be a hook , which is a common requirement
• Through the api call, whether there is the viewing authority and profile of the other uuid's circle of friends, it should also be a hook
• Finally, we need to encapsulate a big hook to assemble these two hook , we first draw a business flowchart, and disassemble several custom hook

At this time, the problem is coming. If hook is not encapsulated, then we will call these hook or functions where the component is used, and then the component will complete the business logic judgment through a series of processing judgments, but this is to view the group through the avatar The situation of the inner opponent’s circle of friends will be used in more than one place, then this logic needs to be reused at this time, and the faced mode needs to be used here.

Use of faced mode

• Provide a unified interface to access a group of interfaces in the subsystem

At this time, we should provide a hook , through which to access these hook , and finally reuse this logic in the business

• Package the unified external hook . Used to access multiple internal hook

• Scenarios for external business use of faced mode:

  • User clicks on the avatars of other people in the group
  • The user clicks on the comment area of Moments-the avatar of the friend
  • User clicks through business card
  • Other scenarios in the future...The specific business scenarios are shown in the following figure:

In this way, you may not only understand why React made hooks , but also understand what the faced pattern is.

• Through faced mode and react hooks , in the business system development, efficiency can be greatly improved, and the robustness of complex business systems can be strengthened. The single logic hook corresponds to the single logic back-end interface, and the complex business is controlled by faced Mode uniformly provides external interfaces to access internal subsystems

Write at the end

• The design pattern is really important. The premise is that you can understand it and use it in the business system. Most people I have seen in development just know it but don’t take the initiative to use it. This may be why advanced development needs Deep understanding of design patterns
• If it feels well written, please give me a thumbs up. By the way, pay attention to my official account: Frontend Peak