react Hooks

useEffect

一、useEffect是didMount和didUpdate和willUnmount三個函數的集合

二、useEffec(fun)：fun會在每次組件render以後執行，而fun中return的cleanup會在willUnmount中執行

三、useEffect(fun,[xxx])第二個參數用於訂閱哪一個props修改後執行，能夠利用此優化

 

 

自定義hook

一、以 「use」 開頭的函數，函數內部能夠調用其餘的 Hook

二、Hook 是一種複用狀態邏輯的機制，因此每次使用自定義 Hook 時，其中的全部 state 和反作用都是徹底隔離的。只是處理state的邏輯同樣

// useFriendStatus

import React, { 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;
}


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