摘要：第一次了解這項(xiàng)特性的時(shí)候，真的有一種豁然開朗，發(fā)現(xiàn)新大陸的感覺。在絕大多數(shù)情況下，是更好的選擇。唯一例外的就是需要根據(jù)新的來(lái)進(jìn)行操作的場(chǎng)景。會(huì)保證在頁(yè)面渲染前執(zhí)行，也就是說(shuō)頁(yè)面渲染出來(lái)的是最終的效果。上面條規(guī)則都是為了保證調(diào)用順序的穩(wěn)定性。

歡迎關(guān)注我的公眾號(hào)睿Talk，獲取我最新的文章：

React Hooks 是從 v16.8 引入的又一開創(chuàng)性的新特性。第一次了解這項(xiàng)特性的時(shí)候，真的有一種豁然開朗，發(fā)現(xiàn)新大陸的感覺。我深深的為 React 團(tuán)隊(duì)天馬行空的創(chuàng)造力和精益求精的鉆研精神所折服。本文除了介紹具體的用法外，還會(huì)分析背后的邏輯和使用時(shí)候的注意事項(xiàng)，力求做到知其然也知其所以然。

這個(gè)系列分上下兩篇，這里是上篇的傳送門：
React Hooks 解析（上）：基礎(chǔ)

useLayoutEffect的用法跟useEffect的用法是完全一樣的，都可以執(zhí)行副作用和清理操作。它們之間唯一的區(qū)別就是執(zhí)行的時(shí)機(jī)。

useEffect不會(huì)阻塞瀏覽器的繪制任務(wù)，它在頁(yè)面更新后才會(huì)執(zhí)行。

而useLayoutEffect跟componentDidMount和componentDidUpdate的執(zhí)行時(shí)機(jī)一樣，會(huì)阻塞頁(yè)面的渲染。如果在里面執(zhí)行耗時(shí)任務(wù)的話，頁(yè)面就會(huì)卡頓。

在絕大多數(shù)情況下，useEffectHook 是更好的選擇。唯一例外的就是需要根據(jù)新的 UI 來(lái)進(jìn)行 DOM 操作的場(chǎng)景。useLayoutEffect會(huì)保證在頁(yè)面渲染前執(zhí)行，也就是說(shuō)頁(yè)面渲染出來(lái)的是最終的效果。如果使用useEffect，頁(yè)面很可能因?yàn)殇秩玖?2 次而出現(xiàn)抖動(dòng)。

useContext可以很方便的去訂閱 context 的改變，并在合適的時(shí)候重新渲染組件。我們先來(lái)熟悉下標(biāo)準(zhǔn)的 context API 用法：

const ThemeContext = React.createContext("light");

class App extends React.Component {
  render() {
    return (
      
        
      
    );
  }
}

// 中間層組件
function Toolbar(props) {
  return (
    

      
    
  );
}

class ThemedButton extends React.Component {
  // 通過(guò)定義靜態(tài)屬性 contextType 來(lái)訂閱
  static contextType = ThemeContext;
  render() {
    return ;
  }
}

除了定義靜態(tài)屬性的方式，還有另外一種針對(duì)Function Component的訂閱方式：

function ThemedButton() {
    // 通過(guò)定義 Consumer 來(lái)訂閱
    return (
        
          {value => }
        
    );
}

使用useContext來(lái)訂閱，代碼會(huì)是這個(gè)樣子，沒(méi)有額外的層級(jí)和奇怪的模式：

function ThemedButton() {
  const value = useContext(NumberContext);
  return ;
}

在需要訂閱多個(gè) context 的時(shí)候，就更能體現(xiàn)出useContext的優(yōu)勢(shì)。傳統(tǒng)的實(shí)現(xiàn)方式：

function HeaderBar() {
  return (
    
      {user =>
        
          {notifications =>
            

              Welcome back, {user.name}!
              You have {notifications.length} notifications.
            
          }
      }
    
  );
}

useContext的實(shí)現(xiàn)方式更加簡(jiǎn)潔直觀：

function HeaderBar() {
  const user = useContext(CurrentUser);
  const notifications = useContext(Notifications);

  return (
    

      Welcome back, {user.name}!
      You have {notifications.length} notifications.
    
  );
}

useReducer的用法跟 Redux 非常相似，當(dāng) state 的計(jì)算邏輯比較復(fù)雜又或者需要根據(jù)以前的值來(lái)計(jì)算時(shí)，使用這個(gè) Hook 比useState會(huì)更好。下面是一個(gè)例子：

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return {count: state.count + 1};
    case "decrement":
      return {count: state.count - 1};
    case "reset":
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
       dispatch({type: "reset", payload: initialCount})}>
        Reset
      
       dispatch({type: "increment"})}>+
       dispatch({type: "decrement"})}>-
    
  );
}

結(jié)合 context API，我們可以模擬 Redux 的操作了，這對(duì)組件層級(jí)很深的場(chǎng)景特別有用，不需要一層一層的把 state 和 callback 往下傳：

const TodosDispatch = React.createContext(null);
const TodosState = React.createContext(null);

function TodosApp() {
  const [todos, dispatch] = useReducer(todosReducer);

  return (
    
      
        
      
    
  );
}

function DeepChild(props) {
  const dispatch = useContext(TodosDispatch);
  const todos = useContext(TodosState);

  function handleClick() {
    dispatch({ type: "add", text: "hello" });
  }

  return (
    <>
      {todos}
      Add todo
    
  );
}

useCallback和useMemo設(shè)計(jì)的初衷是用來(lái)做性能優(yōu)化的。在Class Component中考慮以下的場(chǎng)景：

class Foo extends Component {
  handleClick() {
    console.log("Click happened");
  }
  render() {
    return  this.handleClick()}>Click Me;
  }
}

傳給 Button 的 onClick 方法每次都是重新創(chuàng)建的，這會(huì)導(dǎo)致每次 Foo render 的時(shí)候，Button 也跟著 render。優(yōu)化方法有 2 種，箭頭函數(shù)和 bind。下面以 bind 為例子：

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log("Click happened");
  }
  render() {
    return Click Me;
  }
}

同樣的，Function Component也有這個(gè)問(wèn)題：

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

  const handleClick() {
    console.log(`Click happened with dependency: ${count}`)
  }
  return Click Me;
}

而 React 給出的方案是useCallback Hook。在依賴不變的情況下 (在我們的例子中是 count )，它會(huì)返回相同的引用，避免子組件進(jìn)行無(wú)意義的重復(fù)渲染：

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

  const memoizedHandleClick = useCallback(
    () => console.log(`Click happened with dependency: ${count}`), [count],
  ); 
  return Click Me;
}

useCallback緩存的是方法的引用，而useMemo緩存的則是方法的返回值。使用場(chǎng)景是減少不必要的子組件渲染：

function Parent({ a, b }) {
  // 當(dāng) a 改變時(shí)才會(huì)重新渲染
  const child1 = useMemo(() => , [a]);
  // 當(dāng) b 改變時(shí)才會(huì)重新渲染
  const child2 = useMemo(() => , [b]);
  return (
    <>
      {child1}
      {child2}
    
  )
}

如果想實(shí)現(xiàn)Class Component的shouldComponentUpdate方法，可以使用React.memo方法，區(qū)別是它只能比較 props，不會(huì)比較 state：

const Parent = React.memo(({ a, b }) => {
  // 當(dāng) a 改變時(shí)才會(huì)重新渲染
  const child1 = useMemo(() => , [a]);
  // 當(dāng) b 改變時(shí)才會(huì)重新渲染
  const child2 = useMemo(() => , [b]);
  return (
    <>
      {child1}
      {child2}
    
  )
});

Class Component獲取 ref 的方式如下：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  
  componentDidMount() {
    this.myRef.current.focus();
  }  

  render() {
    return ;
  }
}

Hooks 的實(shí)現(xiàn)方式如下：

function() {
  const myRef = useRef(null);

  useEffect(() => {
    myRef.current.focus();
  }, [])
  
  return ;
}

useRef返回一個(gè)普通 JS 對(duì)象，可以將任意數(shù)據(jù)存到current屬性里面，就像使用實(shí)例化對(duì)象的this一樣。另外一個(gè)使用場(chǎng)景是獲取 previous props 或 previous state：

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

  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });
  const prevCount = prevCountRef.current;

  return 
Now: {count}, before: {prevCount}
;
}

還記得我們上一篇提到的 React 存在的問(wèn)題嗎？其中一點(diǎn)是：

帶組件狀態(tài)的邏輯很難重用

通過(guò)自定義 Hooks 就能解決這一難題。

繼續(xù)以上一篇文章中訂閱朋友狀態(tài)的例子：

import React, { useState, useEffect } from "react";

function FriendStatus(props) {
  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);
    };
  });

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

假設(shè)現(xiàn)在我有另一個(gè)組件有類似的邏輯，當(dāng)朋友上線的時(shí)候展示為綠色。簡(jiǎn)單的復(fù)制粘貼雖然可以實(shí)現(xiàn)需求，但太不優(yōu)雅：

import React, { useState, useEffect } from "react";

function FriendListItem(props) {
  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);
    };
  });

  return (
    

      {props.friend.name}
    
  );
}

這時(shí)我們就可以自定義一個(gè) Hook 來(lái)封裝訂閱的邏輯：

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

自定義 Hook 的命名有講究，必須以use開頭，在里面可以調(diào)用其它的 Hook。入?yún)⒑头祷刂刀伎梢愿鶕?jù)需要自定義，沒(méi)有特殊的約定。使用也像普通的函數(shù)調(diào)用一樣，Hook 里面其它的 Hook（如useEffect）會(huì)自動(dòng)在合適的時(shí)候調(diào)用：

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 (
    

      {props.friend.name}
    
  );
}

自定義 Hook 其實(shí)就是一個(gè)普通的函數(shù)定義，以use開頭來(lái)命名也只是為了方便靜態(tài)代碼檢測(cè)，不以它開頭也完全不影響使用。在此不得不佩服 React 團(tuán)隊(duì)的巧妙設(shè)計(jì)。

使用 Hooks 的時(shí)候必須遵守 2 條規(guī)則：

只能在代碼的第一層調(diào)用 Hooks，不能在循環(huán)、條件分支或者嵌套函數(shù)中調(diào)用 Hooks。

只能在Function Component或者自定義 Hook 中調(diào)用 Hooks，不能在普通的 JS 函數(shù)中調(diào)用。

Hooks 的設(shè)計(jì)極度依賴其定義時(shí)候的順序，如果在后序的 render 中 Hooks 的調(diào)用順序發(fā)生變化，就會(huì)出現(xiàn)不可預(yù)知的問(wèn)題。上面 2 條規(guī)則都是為了保證 Hooks 調(diào)用順序的穩(wěn)定性。為了貫徹這 2 條規(guī)則，React 提供一個(gè) ESLint plugin 來(lái)做靜態(tài)代碼檢測(cè)：eslint-plugin-react-hooks。

本文深入介紹了 6 個(gè) React 預(yù)定義 Hook 的使用方法和注意事項(xiàng)，并講解了如何自定義 Hook，以及使用 Hooks 要遵循的一些約定。到此為止，Hooks 相關(guān)的內(nèi)容已經(jīng)介紹完了，內(nèi)容比我剛開始計(jì)劃的要多不少，想要徹底理解 Hooks 的設(shè)計(jì)是需要投入相當(dāng)精力的，希望本文可以為你學(xué)習(xí)這一新特性提供一些幫助。