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