摘要：前言樓主最近在整理的一些資料，為項(xiàng)目重構(gòu)作準(zhǔn)備，下午整理成了這篇文章。給傳入的是一個(gè)初始值，比如，這個(gè)按鈕的最初要顯示的是。取代了提供了一個(gè)統(tǒng)一的。

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

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

下面我會(huì)用一個(gè)具體的例子來(lái)說明， 通過這個(gè)例子， 你將了解：

如何使用 React Hooks

如何用 React Class components 實(shí)現(xiàn)同樣的邏輯

先快速搭建一個(gè)項(xiàng)目:

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

功能非常簡(jiǎn)單： 點(diǎn)一下按鈕， 就更新 button 的 text。

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

import React, { useState } from "react";

引入 useState 就意味著我們將要把一些狀態(tài)管理置于組件內(nèi)部， 而且我們的 React Component 將不再是一個(gè) ES6 class， 取而代之的是一個(gè)簡(jiǎn)單的純函數(shù)。

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

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

如果對(duì)這個(gè)語(yǔ)法有疑問， 可以參考 ES6 解構(gòu).

這兩個(gè)值的名字， 你可以隨意取， 和 React 無(wú)關(guān)，但是還是建議你根據(jù)使用的目的取一個(gè)足夠具體和清晰的名字。

就比如上面寫的， 一個(gè)代表是 buttonText 的 值, 另一個(gè)代表是 setButtonText 的 更新函數(shù)。

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

這個(gè)簡(jiǎn)單的例子的代碼全貌：

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 獲取數(shù)據(jù)。

在這之前， 我們都是在 componentDidMount 函數(shù)里調(diào)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 來(lái)重寫：

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

運(yùn)行一下就會(huì)發(fā)現(xiàn)，哎呦， 報(bào)錯(cuò)了， 無(wú)限循環(huán)：

原因其實(shí)也非常簡(jiǎn)單， useEffect 存在的目的 和componentDidMount, componentDidUpdate, and componentWillUnmount是一致的， 每次state 變化 或者 有新的props 進(jìn)來(lái)的時(shí)候，componentDidUpdate componentDidUpdate` 都會(huì)執(zhí)行。

要解決這個(gè) "bug" 也非常簡(jiǎn)單, 給 useEffect 傳入一個(gè)空數(shù)組作為第二個(gè)參數(shù):

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

關(guān)于 Hook 的詳細(xì)信息可以參考： Using the Effect Hook

看到這你可能會(huì)按捺不住內(nèi)心的小火苗，要去重構(gòu)項(xiàng)目，個(gè)人還不建議這么做，因?yàn)榻酉聛?lái)的幾個(gè)版本中可能會(huì)有變化， 就像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

無(wú)論怎么說， useEffect 的出現(xiàn)還是一件好事。

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

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

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

還是上面的例子，我們把取數(shù)據(jù)的邏輯抽出來(lái)：

// 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 本身就是為了解決組件間邏輯公用的問題的。

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

Hooks 的出現(xiàn)是把這種面向生命周期編程變成了面向業(yè)務(wù)邏輯編程，讓我們不用再去關(guān)注生命周期：

圖片來(lái)源

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

useState 使我們?cè)?b>不借助 ES6 class 的前提下， 在組件內(nèi)部使用 state 成為可能。

useEffect 取代了 componentDidMount, componentDidUpdate, and componentWillUnmount, 提供了一個(gè)統(tǒng)一的API。

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

一個(gè)顯而易見的事實(shí)是， 過不來(lái)了多久， 我們就會(huì)有三種創(chuàng)建React components 的姿勢(shì)：

functional components

class components

functional components with hooks

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

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

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

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

關(guān)于狀態(tài)管理， 還有一個(gè)比較有趣的文章： useReducer, don"t useState

比較有意思的是， 我們最后會(huì)大量使用 useReducer， 形勢(shì)和 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
  }
}

這也從側(cè)面證明了Redux 在社區(qū)中的影響力（ 其實(shí)這兩個(gè)東西的核心開發(fā)者是同一個(gè)人 ）。

Hooks 的出現(xiàn)簡(jiǎn)化了邏輯，把面向生命周期編程變成了面向業(yè)務(wù)邏輯編程，為邏輯復(fù)用提供了更多可能。

Hooks 是未來(lái)的方向。

大概就是這些， 希望能對(duì)大家有些啟發(fā)和幫助。

才疏學(xué)淺，行文若有紕漏，還請(qǐng)各位大大幫忙指正， 謝謝。