React Hooks 解析（下）：進階

歡迎關注我的公衆號睿Talk，獲取我最新的文章：

一、前言

React Hooks 是從 v16.8 引入的又一開創性的新特性。第一次瞭解這項特性的時候，真的有一種豁然開朗，發現新大陸的感覺。我深深的爲 React 團隊天馬行空的創造力和精益求精的鑽研精神所折服。本文除了介紹具體的用法外，還會分析背後的邏輯和使用時候的注意事項，力求做到知其然也知其所以然。

這個系列分上下兩篇，這裏是上篇的傳送門：
React Hooks 解析（上）：基礎

二、useLayoutEffect

useLayoutEffect的用法跟useEffect的用法是完全一樣的，都可以執行副作用和清理操作。它們之間唯一的區別就是執行的時機。

useEffect不會阻塞瀏覽器的繪製任務，它在頁面更新後纔會執行。

而useLayoutEffect跟componentDidMount和componentDidUpdate的執行時機一樣，會阻塞頁面的渲染。如果在裏面執行耗時任務的話，頁面就會卡頓。

在絕大多數情況下，useEffectHook 是更好的選擇。唯一例外的就是需要根據新的 UI 來進行 DOM 操作的場景。useLayoutEffect會保證在頁面渲染前執行，也就是說頁面渲染出來的是最終的效果。如果使用useEffect，頁面很可能因爲渲染了 2 次而出現抖動。

三、useContext

useContext可以很方便的去訂閱 context 的改變，並在合適的時候重新渲染組件。我們先來熟悉下標準的 context API 用法：

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

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中間層組件
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 通過定義靜態屬性 contextType 來訂閱
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

除了定義靜態屬性的方式，還有另外一種針對Function Component的訂閱方式：

function ThemedButton() {
    // 通過定義 Consumer 來訂閱
    return (
        <ThemeContext.Consumer>
          {value => <Button theme={value} />}
        </ThemeContext.Consumer>
    );
}

使用useEffect來訂閱，代碼會是這個樣子，沒有額外的層級和奇怪的模式：

function ThemedButton() {
  const value = useContext(NumberContext);
  return <Button theme={value} />;
}

在需要訂閱多個 context 的時候，就更能體現出useContext的優勢。傳統的實現方式：

function HeaderBar() {
  return (
    <CurrentUser.Consumer>
      {user =>
        <Notifications.Consumer>
          {notifications =>
            <header>
              Welcome back, {user.name}!
              You have {notifications.length} notifications.
            </header>
          }
      }
    </CurrentUser.Consumer>
  );
}

useEffect的實現方式更加簡潔直觀：

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

  return (
    <header>
      Welcome back, {user.name}!
      You have {notifications.length} notifications.
    </header>
  );
}

四、useReducer

useReducer的用法跟 Redux 非常相似，當 state 的計算邏輯比較複雜又或者需要根據以前的值來計算時，使用這個 Hook 比useState會更好。下面是一個例子：

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}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

結合 context API，我們可以模擬 Redux 的操作了，這對組件層級很深的場景特別有用，不需要一層一層的把 state 和 callback 往下傳：

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

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

  return (
    <TodosDispatch.Provider value={dispatch}>
      <TodosState.Provider value={todos}>
        <DeepTree todos={todos} />
      </TodosState.Provider>
    </TodosDispatch.Provider>
  );
}

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

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

  return (
    <>
      {todos}
      <button onClick={handleClick}>Add todo</button>
    </>
  );
}

五、useCallback / useMemo / React.memo

useCallback和useMemo設計的初衷是用來做性能優化的。在Class Component中考慮以下的場景：

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <Button onClick={() => this.handleClick()}>Click Me</Button>;
  }
}

傳給 Button 的 onClick 方法每次都是重新創建的，這會導致每次 Foo render 的時候，Button 也跟着 render。優化方法有 2 種，剪頭函數和 bind。以下以 bind 爲例子：

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <Button onClick={this.handleClick}>Click Me</Button>;
  }
}

同樣的，Function Component也有這個問題：

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

  const handleClick() {
    console.log(`Click happened with dependency: ${count}`)
  }
  return <Button onClick={handleClick}>Click Me</Button>;
}

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

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

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

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

function Parent({ a, b }) {
  // 當 a 改變時纔會重新渲染
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // 當 b 改變時纔會重新渲染
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

如果想實現Class Component的shouldComponentUpdate方法，可以使用React.memo方法，區別時它只能比較 props，不會比較 state：

const Parent = React.memo(({ a, b }) => {
  // 當 a 改變時纔會重新渲染
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // 當 b 改變時纔會重新渲染
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
});

六、useRef

Class Component獲取 ref 的方式如下：

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

  render() {
    return <input ref={this.myRef} type="text" />;
  }
}

Hooks 的實現方式如下

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

  useEffect(() => {
    myRef.current.focus();
  }, [])
  
  return <input ref={myRef} type="text" />;
}

useRef返回一個普通 JS 對象，可以將任意數據存到current屬性裏面，就像使用實例化對象的this一樣。另外一個場景是獲取 previous props 或 state：

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

  const prevCountRef = useRef();

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

  return <h1>Now: {count}, before: {prevCount}</h1>;
}

七、自定義 Hooks

還記得我們上一篇提到的 React 存在的問題嗎？其中一點是：

帶組件狀態的邏輯很難重用

通過自定義 Hooks 就能解決這一難題。

繼續以上一篇文章中訂閱朋友狀態爲例子：

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

假設現在我有另一個組件有類似的邏輯，當朋友上線的時候展示爲綠色。簡單的複製粘貼雖然可以實現需求，但太不優雅：

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 (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

這時我們就可以自定義一個 Hook 來封裝訂閱的邏輯：

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開頭，在裏面可以調用其它的 Hook。入參和返回值都可以根據需要自定義，沒有特殊的約定。使用也像普通的函數調用一樣，Hook 裏面其它的 Hook（如useEffect）會自動在合適的時候調用：

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

自定義 Hook 其實就是一個普通的函數定義，以use開頭來命名也只是爲了方便靜態代碼檢測，不以它開頭也完全不影響使用。在此不得不佩服 React 團隊設計之巧妙。

八、Hooks 使用規則

使用 Hooks 的時候必須遵守 2 項規則：

只能在代碼的第一層調用 Hooks，不要在循環、條件分支或者嵌套函數中調用 Hooks。
只能在Function Component或者自定義 Hook 中調用 Hooks，不要在普通的 JS 函數中調用。

Hooks 的設計極度依賴其定義時候的順序，如果在後序的 render 中 Hooks 的調用順序發生變化的話，就會出現不可預知的問題。上面 2 條規則都是爲了保證 Hooks 調用順序的穩定性。爲了貫徹這 2 條規則，React 提供一個 ESLint plugin 來檢測代碼：(eslint-plugin-react-hooks)[https://www.npmjs.com/package...]。

九、總結

本文深入介紹了另外 6 個 React 預定義 Hook 的使用方法和注意事項，並講解了如何自定義 Hook以及使用 Hooks 要遵循的一些約定。到此爲止，Hooks 相關的內容已經介紹完了，內容比我剛開始計劃的要多很多，要徹底理解 Hooks 的設計是需要投入相當精力的，希望本文可以爲你學習這一新特性提供一些幫助。

React Hooks 解析（下）：進階

一、前言

二、useLayoutEffect

三、useContext

四、useReducer

五、useCallback / useMemo / React.memo

六、useRef

七、自定義 Hooks

八、Hooks 使用規則

九、總結

探究職業發展的關鍵：能力模型解讀

高效率使用windows

智能決策新時代：可視化大屏是否能夠超越傳統白板？

解密Prompt系列28. LLM Agent之金融領域摸索：FinMem & FinAgent

分享幾個.NET開源的AI和LLM相關項目框架

NestJS入門

正則表達式使用筆記

你不知道的 useCallback

React Hook 搞定 Race Condition

代碼整潔之道

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結