react Hooks

useEffect

1、useEffect是didMount和didUpdate和willUnmount三个函数的集合

2、useEffec(fun)：fun会在每次组件render之后执行，而fun中return的cleanup会在willUnmount中执行

3、useEffect(fun,[xxx])第二个参数用于订阅哪个props修改后执行，可以利用此优化

 

 

自定义hook

1、以 “use” 开头的函数，函数内部可以调用其他的 Hook

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