React Hooks 入門教程

作者： 阮一峰

日期： 2019年9月 1日

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

（完）

 

原文https://www.ruanyifeng.com/blog/2019/09/react-hooks.html

作者： 阮一峰

日期： 2019年9月 1日

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

（完）

文檔信息

• 版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）
• 發表日期： 2019年9月 1日

 

相關文章

• 2020.01.26: Deno 運行時入門教程：Node.js 的替代品
  這幾天假期，我學習了一下 Deno。它是 Node.js 的替代品。有了它，將來可能就不需要 Node.js 了。
• 2019.08.06: Web Components 入門實例教程
  組件是前端的發展方向，現在流行的 React 和 Vue 都是組件框架。
• 2019.04.15: 如何用網頁腳本追蹤用戶
  本文介紹如何編寫 JavaScript 腳本，將用戶數據發回服務器。
• 2019.02.09: npx 使用教程
  npm 從5.2版開始，增加了 npx 命令。它有很多用處，本文介紹該命令的主要使用場景。