Day28 客制化Hook

昨天了解了Hook的概观之後，今天要利用Hook的规则打造一个客制化的Hook。
以下用React官网的范例，模拟一个判断是有订阅的人否在线的Component，如果他有上线且取消订阅时，一并清除他的上线状态。

//引用Hook中的useState、useEffect
import React, { useState, useEffect } from 'react';

//客制化Hook useFriendStatus，根据接收到的friendID回传订阅者上线状态
function useFriendStatus(friendID) {
//useState:回传值更新isOnline和setIsOnline
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
//根据friendID、handleStatusChange的值执行API
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

将上线状态当作变数，分别使用在有需要的Component上面。

//订阅者状态
function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
//根据订阅状态显示订阅者姓名
function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

每一次呼叫一个 Hook 都可以取得一个完全独立的state，可以根据不同的Component去重复使用。
客制化Component在命名上会以use作为开头，不仅可以方便其他专案合作人员理解它是一个客制化Hook，日後在管理维护时也比较方便。