淺談 React Hooks（二）

在上一篇文章中，我們談到 Hooks 給 React 帶來的一些在開發體驗上的改變，如果你已經開始嘗試 React Hooks，也許你會跟我一樣碰到一個令人疑惑的地方，如果沒有的話，那就再好不過啦，我就權當做個記錄，以便他人之需。

如何繫結事件？

我們先以官方的例子開始：

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

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

看到onClick繫結的那個匿名函式了嗎？這樣寫的話，每次 render 的時候都會重新生成一個新的函式。這在之前可能不需要太在意，因為我們一般只是拿 Function Component 來實現一些展示型元件，在其之下不會有太多的子元件。但是如果我們擁抱 Hooks 之後，那麼就不可控了。

雖然說在一般情況下，這並不會造成太大的效能問題，而且 Function Component 本身的效能就要比 Class Component 更好一點，但是難免會碰到需要優化的時候，比方說在重構原來的 Class Component 的時候，其中有個子元件是個PureComponent，便會使子元件的這個優化失效，那麼怎麼解決呢？

使用useCallback或useMemo來儲存函式的引用，避免重複生成新的函式

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count => count + 1)
  }, []);
  
  // 或者用useMemo
  // const handleClick = useMemo(() => () => {setCount(count => count + 1)}, []);
   
  return (
    <div>
      <p>count: {count}</p>
	  {/* Child為PureComponent */}
      <Child callback={handleClick} />
    </div>
  )
}
複製程式碼

可見useCallback(fn, inputs)等同於useMemo(() => fn, inputs)，那麼這兩個 Hook 具體是怎麼做到的呢？我們可以從原始碼中一窺究竟，我們以useCallback為例（useMemo大體上都是一樣的，就返回值不同，後面會提到）。

首先，在第一次執行useCallback時，React內部會呼叫ReactFiberHooks中的mountCallback，之後再次執行時呼叫的都是updateCallback，具體程式碼可以看這裡：github.com/facebook/re…

我們一點點來看，先看下mountCallback:

function mountCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = [callback, nextDeps];
  return callback;
}
複製程式碼

發現核心在於mountWorkInProgressHook這個方法

function mountWorkInProgressHook(): Hook {
  const hook: Hook = {
    memoizedState: null,

    baseState: null,
    queue: null,
    baseUpdate: null,

    next: null,
  };

  if (workInProgressHook === null) {
    // This is the first hook in the list
    firstWorkInProgressHook = workInProgressHook = hook;
  } else {
    // Append to the end of the list
    workInProgressHook = workInProgressHook.next = hook;
  }
  return workInProgressHook;
}
複製程式碼

程式碼比較簡單，就不一一解釋了，從上面的程式碼我們可以得知 Hooks 的本體：

const hook = {
  memoizedState: null,
  baseState: null,
  queue: null,
  baseUpdate: null,
  next: null,
}
複製程式碼

我們主要關注memoizedState 和 next， memoizedState在不同的 Hook 中存放的值會有所不同，在useCallback中存的就是入參的值[callback, deps]，next的值就是下一個 hook，也就是說 Hooks 其實就是一個單向連結串列，這也就解釋了為什麼 Hooks 需要在頂層呼叫，不能在迴圈、條件語句、巢狀函式中使用，因為需要保證每次呼叫的順序一致。

再來看之後的updateCallback:

function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  // 這個hook就是第一次mount的hook
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  // 所以這裡的memoizedState就是mount時候存著的[callback, deps]
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    if (nextDeps !== null) {
      const prevDeps: Array<mixed> | null = prevState[1];
      // 比較兩次的deps，相同的話就直接返回之前存的callback，而不是新傳進來的callback
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  hook.memoizedState = [callback, nextDeps];
  return callback;
}
複製程式碼

useMemo的實現與useCallback類似，大概看一下：

function mountMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  
  // 與useCallback不同的地方就是memoizedState中存的是nextCreate執行之後的結果
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];
    
  // 返回執行結果
  return nextValue;
}

function updateMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    if (nextDeps !== null) {
      const prevDeps: Array<mixed> | null = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  
  // 這裡也一樣，存的是nextCreate執行之後的結果
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];
  
    // 返回執行結果
  return nextValue;
}
複製程式碼

由以上程式碼便可以看出useCallback和useMemo在用法上的區別了。

除了這兩個方法以外，還可以通過context來傳遞由useReducer生成的dispatch方法，來避免直接傳遞callback，因為dispatch是不變的。這個方法跟前面兩種有本質上的區別，它從源頭上就阻止了callback的傳遞，所以也就不會有前面提到的效能方面的顧慮，這也是官方推薦的方法，特別是元件樹很大的情況下。所以上面的程式碼如果通過這種方式來寫的話，就會是下面這樣，有點像Redux：

import React, { useReducer, useContext } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    default:
      throw new Error();
  }
}

const TodosDispatch = React.createContext(null);

function Counter() {
  const [state, dispatch] = useReducer(reducer, {count: 0});

  return (
    <div>
      <p>count: {state.count}</p>
      <TodosDispatch.Provider value={dispatch}>
        <Child />
      </TodosDispatch.Provider>
    </div>
  )
}

function Child() {
  const dispatch = useContext(TodosDispatch);
  return (
    <button onClick={() => dispatch({type: 'increment'})}>
      click
    </button>
  )
}
複製程式碼

總結

一般情況下，事件繫結可以直接通過箭頭函式處理，不會有明顯的效能問題，寫起來也方便。
如有需求，可以通過useCallback或useMemo來優化。
如果元件樹比較大，傳遞callback的層級可能會很深，可以通過useReducer配合context來處理。

以上只是我個人的一些想法，如有不對之處，歡迎指正～～

原文連結：淺談 React Hooks（二）

淺談 React Hooks（二）

如何繫結事件？

總結

相關文章