摘要：前言樓主最近在整理的一些資料，為項目重構作準備，下午整理成了這篇文章。給傳入的是一個初始值，比如，這個按鈕的最初要顯示的是。取代了提供了一個統一的。

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

樓主最近在整理 React Hooks 的一些資料，為項目重構作準備，下午整理成了這篇文章。
如果之前沒接觸過相關概念，那么通過這篇文章， 你將會了什么是React Hooks , 它是做什么的 ， 以及如何使用。

下面我會用一個具體的例子來說明， 通過這個例子， 你將了解：

如何使用 React Hooks

如何用 React Class components 實現同樣的邏輯

先快速搭建一個項目:

npx create-react-app exploring-hooks

import React, { Component } from "react";

export default class Button extends Component {
  state = { buttonText: "Click me, please" };

  handleClick = () => {
    this.setState(() => {
      return { buttonText: "Thanks, been clicked!" };
    });
  };

  render() {
    const { buttonText } = this.state;
    return {buttonText};
  }
}

功能非常簡單： 點一下按鈕， 就更新 button 的 text。

這里，我們將不再使用 setState 和 ES6 Class. 輪到我們的Hooks登場了：

import React, { useState } from "react";

引入 useState 就意味著我們將要把一些狀態管理置于組件內部， 而且我們的 React Component 將不再是一個 ES6 class， 取而代之的是一個簡單的純函數。

引入 useState 之后，我們將從中取出一個含有兩個元素的數組：

const [buttonText, setButtonText] = useState("Click me, please");

如果對這個語法有疑問， 可以參考 ES6 解構.

這兩個值的名字， 你可以隨意取， 和 React 無關，但是還是建議你根據使用的目的取一個足夠具體和清晰的名字。

就比如上面寫的， 一個代表是 buttonText 的 值, 另一個代表是 setButtonText 的 更新函數。

給 useState 傳入的是一個初始值， 比如， 這個按鈕的最初要顯示的是： Click me, please。

這個簡單的例子的代碼全貌：

import React, { useState } from "react";

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

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

  return {buttonText};
}

下面我們將介紹如何使用 Hooks 獲取數據。

在這之前， 我們都是在 componentDidMount 函數里調API：

import React, { Component } from "react";

export default class DataLoader extends Component {
  
state = { data: [] };

  async componentDidMount() {
    try {
      const response = await fetch(`https://api.coinmarketcap.com/v1/ticker/?limit=10`);
      if (!response.ok) {
        throw Error(response.statusText);
      }
      const json = await response.json();
      this.setState({ data: json });
    } catch (error) {
      console.log(error);
    }
  }

  render() {
    return (
      

        

          {this.state.data.map(el => (
            
{el.name}
          ))}
        
      
    );
  }
}

這種代碼大家想必都非常熟悉了， 下面我們用 Hooks 來重寫：

import React, { useState, useEffect } from "react";

export default function DataLoader() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3001/links/")
      .then(response => response.json())
      .then(data => setData(data));
  });

  return (
    

      

        {data.map(el => (
          
{el.title}
        ))}
      
    
  );
}

運行一下就會發現，哎呦， 報錯了， 無限循環：

原因其實也非常簡單， useEffect 存在的目的 和componentDidMount, componentDidUpdate, and componentWillUnmount是一致的， 每次state 變化 或者 有新的props 進來的時候，componentDidUpdate componentDidUpdate` 都會執行。

要解決這個 "bug" 也非常簡單, 給 useEffect 傳入一個空數組作為第二個參數:

useEffect(() => {
    fetch("http://localhost:3001/links/")
      .then(response => response.json())
      .then(data => setData(data));
  },[]); // << super important array

關于 Hook 的詳細信息可以參考： Using the Effect Hook

看到這你可能會按捺不住內心的小火苗，要去重構項目，個人還不建議這么做，因為接下來的幾個版本中可能會有變化， 就像Ryan Florence 建議的：

Hooks are not the endgame for React data loading.
Data loading is probably the most common effect in an app.
Don"t be in a big hurry to migrate to hooks for data unless you"re okay migrating again when suspense for data is stable.
Own your churn.
—  Ryan Florence (@ryanflorence) February 12, 2019

無論怎么說， useEffect 的出現還是一件好事。

能顯然是能的， 不過沒什么意義， 比如把上面的代碼改一下：

import React, { useState, useEffect } from "react";

export default function DataLoader(props) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3001/links/")
      .then(response => response.json())
      .then(data => setData(data));
  }, []); 

  return props.render(data)
}

從外部傳入一個render即可， 但是這樣做毫無意義： Reack Hooks 本身就是為了解決組件間邏輯公用的問題的。

還是上面的例子，我們把取數據的邏輯抽出來：

// useFetch.tsx
import { useState, useEffect } from "react";

export default function useFetch(url) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [] );

  return data;
}

在其他組件中引用：

import React from "react";
import useFetch from "./useFetch";

export default function DataLoader(props) {
  const data = useFetch("http://localhost:3001/links/");
  return (
    

      

        {data.map(el => (
          
{el.title}
        ))}
      
    
  );
}

上面我們說到 Reack Hooks 本身就是為了解決組件間邏輯公用的問題的。

回顧我們現在的做法，幾乎都是面向生命周期編程：

Hooks 的出現是把這種面向生命周期編程變成了面向業務邏輯編程，讓我們不用再去關注生命周期：

圖片來源

而且， 最新的React 中， 預置了大量的Hooks， 最重要兩個的就是： useState and useEffect.

useState 使我們在不借助 ES6 class 的前提下， 在組件內部使用 state 成為可能。

useEffect 取代了 componentDidMount, componentDidUpdate, and componentWillUnmount, 提供了一個統一的API。

除了這兩個之外， 可以在官方文檔中了解更多:

一個顯而易見的事實是， 過不來了多久， 我們就會有三種創建React components 的姿勢：

functional components

class components

functional components with hooks

作為一個 React 忠實粉絲， 看到這些積極的變化實在是令人感到愉悅。

還有很多幫助我們更好的學和掌握 React Hooks, 也在這里分享一下：

首先還是官方文檔： Introducing Hooks， Hooks at a Glance 是稍微深入一些的內容。

然后是一個入門教程： Build a CRUD App in React with Hooks.

關于狀態管理， 還有一個比較有趣的文章： useReducer, don"t useState

比較有意思的是， 我們最后會大量使用 useReducer， 形勢和 Redux 非常類似：

function reducer(state, action) {
  const { past, future, present } = state
  switch (action.type) {
    case "UNDO":
      const previous = past[past.length - 1]
      const newPast = past.slice(0, past.length - 1)
      return {
        past: newPast,
        present: previous,
        future: [present, ...future],
      }
    case "REDO":
      const next = future[0]
      const newFuture = future.slice(1)
      return {
        past: [...past, present],
        present: next,
        future: newFuture,
      }
    default:
      return state
  }
}

這也從側面證明了Redux 在社區中的影響力（ 其實這兩個東西的核心開發者是同一個人 ）。

Hooks 的出現簡化了邏輯，把面向生命周期編程變成了面向業務邏輯編程，為邏輯復用提供了更多可能。

Hooks 是未來的方向。

大概就是這些， 希望能對大家有些啟發和幫助。

才疏學淺，行文若有紕漏，還請各位大大幫忙指正， 謝謝。