React Hooks 入門教程

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

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

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

一、元件類的缺點

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

（完）

React Hooks 入門教程

一、元件類的缺點

二、函式元件

三、Hook 的含義

四、useState()：狀態鉤子

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

六、useReducer()：action 鉤子

七、useEffect()：副作用鉤子

八、建立自己的 Hooks

九、參考連結

相關文章