构建React Hook 共享逻辑场景及传统做法

一、共享逻辑场景及传统做法
二、创建自定义 Hook
三、使用自定义 Hook
1、上面代码是否功能相同？
2、是否必须以 use 开头设置自定义 Hook？
3、使用相同的 Hook 的两个 Component 会共享 state 吗？
4、自定义 Hook 如何获取隔离 state？
四、Tip：在 Hook 之间传递信息
扩展

 

一、共享逻辑场景及传统做法

构建自己的 Hook 能够将组件逻辑提取到可重用的函数中。

下面代码是 React Hook 文档中使用 Effect Hook 的时候构造的一个聊天应用程序，这个组件显示一条消息，指示朋友是在线还是离线：

import { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

现在比如说聊天应用程序中也有一个联系人列表组件，而在这个列表中，想要把在线的用户名显示绿色。之前的做法可能是把上面订阅的逻辑在复制到 FriendListItem 组件中，不过这不是理想的做法：

import { useState, useEffect } from 'react';

function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };