react hook是什么

react hook是react中引入新特性，它可以讓react函數(shù)組件也擁有狀態(tài)；
通過(guò)自定義hook可以實(shí)現(xiàn)在組件間公用狀態(tài)操作；

react-hook的用法

react提供了useState、useEffect兩個(gè)hook函數(shù)來(lái)創(chuàng)建stack hook和effect hook

state hook

在函數(shù)組件內(nèi)使用useState可以給組件使用狀態(tài)；
useState的入?yún)槌跏紶顟B(tài)，出參為當(dāng)前state以及更新state的函數(shù)；

function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState第一次執(zhí)行時(shí)將創(chuàng)建一個(gè)狀態(tài)，之后執(zhí)行都是使用這個(gè)狀態(tài)；

effect hook

使用useEffect可以給組件添加副作用邏輯；
所謂副作用個(gè)人理解是與react范圍外的世界產(chǎn)生的交互，如dom操作、網(wǎng)絡(luò)請(qǐng)求等(說(shuō)實(shí)話，副作用具體是啥我還沒(méi)完全弄明白)；
useEffect入?yún)⒂袃蓚€(gè)第一個(gè)參數(shù)是副作用函數(shù)、第二個(gè)參數(shù)是個(gè)用于判斷是否執(zhí)行副作用的數(shù)組；

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));
type DependencyList = ReadonlyArray<any>;

副作用有一個(gè)執(zhí)行過(guò)程和一個(gè)可選的清除過(guò)程，副作用函數(shù)定義了執(zhí)行過(guò)程，它的返回值函數(shù)定義了清除過(guò)程；
在組件函數(shù)中定義的副作用像是渲染結(jié)果的一部分，副作用在每次渲染后都會(huì)執(zhí)行，在渲染前、組件銷(xiāo)毀前清除之前的副作用；這樣做使得我們的副作用可以讀到每次的props、state；

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

如果不想每次渲染都執(zhí)行副作用，可以給useEffect第二個(gè)參數(shù)傳一數(shù)組，當(dāng)數(shù)組中的元素沒(méi)有變化時(shí)，不會(huì)觸發(fā)副作用；

自定義hook

自定義hook其實(shí)就是個(gè)內(nèi)部使用了useState、useEffect的普通函數(shù)，并且函數(shù)名以u(píng)se開(kāi)頭；
使用自定義hook可以將組件邏輯提取到可重用的函數(shù)中；

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

TODO
render props、高階組件、effect性能優(yōu)化的注意事項(xiàng)