react hook

什么是Effect Hooks?

替代原來(lái)的生命周期函數(shù)

hooks可以反復(fù)多次使用，給每一個(gè)副作用一個(gè)單獨(dú)的useEffect鉤子。這

這樣，副作用不會(huì)堆在生命周期鉤子里，代碼更加清晰。

useEffect怎么用

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

注意：

每次渲染都會(huì)調(diào)用一遍傳給useEffect的函數(shù)

useEffect中定義的副作用函數(shù)的執(zhí)行不會(huì)阻礙瀏覽器更新視圖，也就是說(shuō)這些函數(shù)是異步執(zhí)行的，而之前的componentDidMount或componentDidUpdate中的代碼則是同步執(zhí)行的。

useEffect怎么解綁

當(dāng)我們?cè)赾omponentDidMount里添加了一個(gè)注冊(cè)，我們得馬上在componentWillUnmount中，也就是組件被注銷之前清除掉我們添加的注冊(cè)，否則內(nèi)存泄漏的問(wèn)題就出現(xiàn)了。

怎么清除呢？讓我們傳給useEffect的副作用函數(shù)返回一個(gè)新的函數(shù)即可。這個(gè)新的函數(shù)將會(huì)在組件下一次重新渲染之后執(zhí)行。這種模式在一些pubsub模式的實(shí)現(xiàn)中很常見?？聪旅娴睦樱?/p>

import { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // 一定注意下這個(gè)順序：告訴react在下次重新渲染組件之后，同時(shí)是下次調(diào)用ChatAPI.subscribeToFriendStatus之前執(zhí)行cleanup
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

這里有一個(gè)點(diǎn)需要重視！這種解綁的模式跟componentWillUnmount不一樣。componentWillUnmount只會(huì)在組件被銷毀前執(zhí)行一次而已，而useEffect里的函數(shù)，每次組件渲染后都會(huì)執(zhí)行一遍，包括副作用函數(shù)返回的這個(gè)清理函數(shù)也會(huì)重新執(zhí)行一遍。