React Hooks 入門教程

React 是主流的前端框架，v16.8 版本引入了全新的 API，叫做 React Hooks，顛覆了以前的用法。

這個 API 是 React 的未來，有必要深入理解。本文談談我的理解，簡單介紹它的用法，幫助大家快速上手。

閱讀本文需要有 React 基礎。如果你還沒學會 React，可以先看一下它的教程。

[更新] 我後來又寫了一篇《輕鬆學會 React 鉤子：以 useEffect() 為例》，補充了對 Hooks 設計思想的解釋，建議大家可以先閱讀那篇文章。

一、組件類的缺點

React 的核心是組件。v16.8 版本之前，組件的標準寫法是類（class）。下面是一個簡單的組件類。


import React, { Component } from "react";

export default class Button extends Component {
  constructor() {
    super();
    this.state = { buttonText: "Click me, please" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(() => {
      return { buttonText: "Thanks, been clicked!" };
    });
  }
  render() {
    const { buttonText } = this.state;
    return <button onClick={this.handleClick}>{buttonText}</button>;
  }
}

（點擊查看運行結果）

這個組件類僅僅是一個按鈕，但可以看到，它的代碼已經很"重"了。真實的 React App 由多個類按照層級，一層層構成，複雜度成倍增長。再加入 Redux，就變得更復雜。

Redux 的作者 Dan Abramov 總結了組件類的幾個缺點。

大型組件很難拆分和重構，也很難測試。

業務邏輯分散在組件的各個方法之中，導致重複邏輯或關聯邏輯。

組件類引入了複雜的編程模式，比如 render props 和高階組件。

二、函數組件

React 團隊希望，組件不要變成複雜的容器，最好只是數據流的管道。開發者根據需要，組合管道即可。 組件的最佳寫法應該是函數，而不是類。

React 早就支持函數組件，下面就是一個例子。


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

但是，這種寫法有重大限制，必須是純函數，不能包含狀態，也不支持生命週期方法，因此無法取代類。

React Hooks 的設計目的，就是加強版函數組件，完全不使用"類"，就能寫出一個全功能的組件。

三、Hook 的含義

Hook 這個單詞的意思是"鉤子"。

React Hooks 的意思是，組件儘量寫成純函數，如果需要外部功能和副作用，就用鉤子把外部代碼"鉤"進來。 React Hooks 就是那些鉤子。

你需要什麼功能，就使用什麼鉤子。React 默認提供了一些常用鉤子，你也可以封裝自己的鉤子。

所有的鉤子都是為函數引入外部功能，所以 React 約定，鉤子一律使用use前綴命名，便於識別。你要使用 xxx 功能，鉤子就命名為 usexxx。

下面介紹 React 默認提供的四個最常用的鉤子。

useState()

useContext()

useReducer()

useEffect()

四、useState()：狀態鉤子

useState()用於為函數組件引入狀態（state）。純函數不能有狀態，所以把狀態放在鉤子裡面。

本文前面那個組件類，用戶點擊按鈕，會導致按鈕的文字改變，文字取決於用戶是否點擊，這就是狀態。使用useState()重寫如下。


import React, { useState } from "react";

export default function  Button()  {
  const  [buttonText, setButtonText] =  useState("Click me,   please");

  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }

  return  <button  onClick={handleClick}>{buttonText}</button>;
}

（點擊查看運行結果）

上面代碼中，Button 組件是一個函數，內部使用useState()鉤子引入狀態。

useState()這個函數接受狀態的初始值，作為參數，上例的初始值為按鈕的文字。該函數返回一個數組，數組的第一個成員是一個變量（上例是buttonText），指向狀態的當前值。第二個成員是一個函數，用來更新狀態，約定是set前綴加上狀態的變量名（上例是setButtonText）。

五、useContext()：共享狀態鉤子

如果需要在組件之間共享狀態，可以使用useContext()。

現在有兩個組件 Navbar 和 Messages，我們希望它們之間共享狀態。


<div className="App">
  <Navbar/>
  <Messages/>
</div>

第一步就是使用 React Context API，在組件外部建立一個 Context。


const AppContext = React.createContext({});

組件封裝代碼如下。


<AppContext.Provider value={{
  username: 'superawesome'
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

上面代碼中，AppContext.Provider提供了一個 Context 對象，這個對象可以被子組件共享。

Navbar 組件的代碼如下。


const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

上面代碼中，useContext()鉤子函數用來引入 Context 對象，從中獲取username屬性。

Message 組件的代碼也類似。


const Messages = () => {
  const { username } = useContext(AppContext)

  return (
    <div className="messages">
      <h1>Messages</h1>
      <p>1 message for {username}</p>
      <p className="message">useContext is awesome!</p>
    </div>
  )
}

（點擊查看運行結果）

六、useReducer()：action 鉤子

React 本身不提供狀態管理功能，通常需要使用外部庫。這方面最常用的庫是 Redux。

Redux 的核心概念是，組件發出 action 與狀態管理器通信。狀態管理器收到 action 以後，使用 Reducer 函數算出新的狀態，Reducer 函數的形式是(state, action) => newState。

useReducers()鉤子用來引入 Reducer 功能。


const [state, dispatch] = useReducer(reducer, initialState);

上面是useReducer()的基本用法，它接受 Reducer 函數和狀態的初始值作為參數，返回一個數組。數組的第一個成員是狀態的當前值，第二個成員是發送 action 的dispatch函數。

下面是一個計數器的例子。用於計算狀態的 Reducer 函數如下。


const myReducer = (state, action) => {
  switch(action.type)  {
    case('countUp'):
      return  {
        ...state,
        count: state.count + 1
      }
    default:
      return  state;
  }
}

組件代碼如下。


function App() {
  const [state, dispatch] = useReducer(myReducer, { count:   0 });
  return  (
    <div className="App">
      <button onClick={() => dispatch({ type: 'countUp' })}>
        +1
      </button>
      <p>Count: {state.count}</p>
    </div>
  );
}

（點擊查看運行結果）

由於 Hooks 可以提供共享狀態和 Reducer 函數，所以它在這些方面可以取代 Redux。但是，它沒法提供中間件（middleware）和時間旅行（time travel），如果你需要這兩個功能，還是要用 Redux。

七、useEffect()：副作用鉤子

useEffect()用來引入具有副作用的操作，最常見的就是向服務器請求數據。以前，放在componentDidMount裡面的代碼，現在可以放在useEffect()。

useEffect()的用法如下。


useEffect(()  =>  {
  // Async Action
}, [dependencies])

上面用法中，useEffect()接受兩個參數。第一個參數是一個函數，異步操作的代碼放在裡面。第二個參數是一個數組，用於給出 Effect 的依賴項，只要這個數組發生變化，useEffect()就會執行。第二個參數可以省略，這時每次組件渲染時，就會執行useEffect()。

下面看一個例子。


const Person = ({ personId }) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});

  useEffect(() => {
    setLoading(true); 
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId])

  if (loading === true) {
    return <p>Loading ...</p>
  }

  return <div>
    <p>You're viewing: {person.name}</p>
    <p>Height: {person.height}</p>
    <p>Mass: {person.mass}</p>
  </div>
}

上面代碼中，每當組件參數personId發生變化，useEffect()就會執行。組件第一次渲染時，useEffect()也會執行。

（點擊查看運行結果）

八、創建自己的 Hooks

上例的 Hooks 代碼還可以封裝起來，變成一個自定義的 Hook，便於共享。


const usePerson = (personId) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true);
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId]);  
  return [loading, person];
};

上面代碼中，usePerson()就是一個自定義的 Hook。

Person 組件就改用這個新的鉤子，引入封裝的邏輯。


const Person = ({ personId }) => {
  const [loading, person] = usePerson(personId);

  if (loading === true) {
    return <p>Loading ...</p>;
  }

  return (
    <div>
      <p>You're viewing: {person.name}</p>
      <p>Height: {person.height}</p>
      <p>Mass: {person.mass}</p>
    </div>
  );
};

（點擊查看運行結果）

九、參考鏈接

Can You Replace Redux with React Hooks?, Chris Achard
Why React Hooks?, Tyler McGinnis
React Hooks Tutorial for Beginners, Valentino Gagliardi

（完）

推薦訂閱源

阮一峰的网络日志

一、組件類的缺點

二、函數組件

三、Hook 的含義

四、useState()：狀態鉤子

五、useContext()：共享狀態鉤子

六、useReducer()：action 鉤子

七、useEffect()：副作用鉤子

八、創建自己的 Hooks

九、參考鏈接