iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
自我挑戰組

React自我學習心得30天~系列 第 28

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,日後在管理維護時也比較方便。


上一篇
Dat27 Hook概觀介紹
下一篇
Day29 Redx初步介紹
系列文
React自我學習心得30天~30

尚未有邦友留言

立即登入留言