摘要：看完代碼應該就能很好的理解的使用了吧，具體代碼的運行點擊在線演示查看在線演示總結(jié)給我們帶來的就是在函數(shù)的基礎(chǔ)上可以加入狀態(tài)和生命周期等函數(shù)不曾有的特性，這個特性的加入能夠讓我們更好的抽象組件，提高代碼的復用性。

Hook 是 React 16.8 的新增特性。是對 React 函數(shù)組件的一種擴展，通過提供一些特殊的函數(shù)，讓無狀態(tài)的組件擁有狀態(tài)組件才擁有的能力。

沒有Hook之前寫組件有兩種形式，分別為

函數(shù)組件

class組件

函數(shù)組件特點如下

所有的數(shù)據(jù)都是依賴props傳入的，沒有內(nèi)部state

沒有生命周期

沒有this(組件實例)

實際開發(fā)中因為業(yè)務復雜，一般使用函數(shù)組件無法滿足，所以大家默認都是使用class組件進行開發(fā)，這是一個不會出錯的選擇。函數(shù)組件大家平時應該都挺少會去用的，因為函數(shù)組件能提供的功能比較局限。但是引入Hook后，函數(shù)的能力就被擴展了許多，因為函數(shù)的特性，非常適合抽象成可復用的組件。

平時寫組件的方式就是通過props傳遞給下一個組件，有些簡單的情況這樣也挺好的。但是當項目不斷迭代，會發(fā)現(xiàn)當組件被多個模塊多次引用，還是會多寫一些重復的邏輯。因為受到到狀態(tài)或者生命周期的影響，導致這部分邏輯卻又很難拆出來。

引入Hook就可以將受狀態(tài)或生命周期影響的組件抽出來。

最外層的代碼集中維護許多state狀態(tài)，導致頁面引入越來越多毫無關(guān)聯(lián)的模塊，代碼的可讀性大大降低，有時候因為多個生命周期里面有大量不相關(guān)的邏輯，這樣雜亂的代碼容易引起bug，也增加了其它開發(fā)人員維護的難度。

Hook將組件中每一個相關(guān)的小模塊拆分成一個函數(shù)，這樣能夠讓組件即使龐大結(jié)構(gòu)也是清晰的。

State Hook： 在函數(shù)組件中使用state

Effect Hook： 在函數(shù)組件中使用生命周期

Custom Hook： 自定義Hook，可以將組件邏輯提取到函數(shù)中。(注意：自定義 Hook 是一個函數(shù)，其名稱以 “use” 開頭，函數(shù)內(nèi)部可以調(diào)用其他的 Hook)

Hook 本質(zhì)就是 JavaScript 函數(shù)，但是在使用它時需要遵循兩條規(guī)則

只在最頂層使用 Hook(不要在循環(huán)，條件或嵌套函數(shù)中調(diào)用)

只在 React 函數(shù)中調(diào)用 Hook

強制執(zhí)行 hooks 的最佳實踐

eslint-plugin-react-hooks

詳細的一些概念官方文檔已經(jīng)寫得很全面了，可以參考：Hook的官方文檔。

接下來就用一個實際的例子來說明一下State Hook的使用

產(chǎn)品第一版本需求如下：

現(xiàn)在有 小A，小B 兩位同學，每位同學都處于未穿鞋的狀態(tài)，小A穿鞋需要2s，小B穿鞋需要5s，在頁面一中用文字描述兩位同學的穿鞋狀態(tài)變更( 如果小A正在穿鞋中，則在頁面上顯示 "小A正在穿鞋子"，如果小A已經(jīng)穿好了鞋子，則將文字替換為 "小A已經(jīng)穿好鞋子")

使用class組件實現(xiàn)如下：

src/demo1.js

import React from "react";

class Page extends React.Component {
  state = {
    data: [
      { id: 1, name: "小A", time: "2000" },
      { id: 2, name: "小B", time: "5000" }
    ]
  };

  start(item) {
    this.setState({
      [item.id]: "穿鞋子"
    });

    setTimeout(() => {
      this.setState({
        [item.id]: "穿好鞋子"
      });
    }, item.time);
  }

  componentDidMount() {
    this.state.data.forEach(item => {
      this.start(item);
    });
  }

  render() {
    return (
      

        {this.state.data.map(item => {
          return (
            

              {this.state[item.id] === "穿鞋子"
                ? `${item.name}正在穿鞋子...`
                : `${item.name}已經(jīng)穿好鞋子了`}
            
          );
        })}
      
    );
  }
}

export default Page;

使用Hook組件實現(xiàn)如下：

自定義hook如下：

src/useHook.js

import React, { useState } from "react";

function useHook(item) {
  const [status, setStatus] = useState("穿鞋子");

  setTimeout(() => {
    setStatus("穿好鞋子");
  }, item.time);

  return (
    

      {status === "穿鞋子"
        ? `${item.name}正在穿鞋子...`
        : `${item.name}已經(jīng)穿好鞋子了`}
    
  );
}

export default useHook;

引用hook的函數(shù)組件

src/hookDemo1.js

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

function Page() {
  const data = [
    { id: 1, name: "小A", time: "2000" },
    { id: 2, name: "小B", time: "5000" }
  ];
  return (
    

      {data.map(item => {
        return useHook(item);
      })}
    
  );
}

export default Page;

好了，實現(xiàn)完上面的需求，現(xiàn)在覺得hook的好處并沒有什么體現(xiàn)，接下來產(chǎn)品又發(fā)布了第二版需求，要求我們在另一個頁面顯示另外兩位同學的狀態(tài)。需求如下：

現(xiàn)在有 小C，小D 兩位同學，每位同學都處于未穿鞋的狀態(tài)，小A穿鞋需要4s，小B穿鞋需要8s，在頁面二中用文字描述兩位同學的穿鞋狀態(tài)變更( 如果小A正在穿鞋中，則在頁面上顯示 "小C正在穿鞋子"，如果小C已經(jīng)穿好了鞋子，則將文字替換為 "小C已經(jīng)穿好鞋子")

接下來再第一個版本的基礎(chǔ)上來實現(xiàn)第二個需求

使用class組件實現(xiàn)如下：

src/demo2.js

import React from "react";

class Page extends React.Component {
  state = {
    data: [
      { id: 1, name: "小C", time: "4000" },
      { id: 2, name: "小D", time: "8000" }
    ]
  };

  start(item) {
    this.setState({
      [item.id]: "穿鞋子"
    });

    setTimeout(() => {
      this.setState({
        [item.id]: "穿好鞋子"
      });
    }, item.time);
  }

  componentDidMount() {
    this.state.data.forEach(item => {
      this.start(item);
    });
  }

  render() {
    return (
      

        {this.state.data.map(item => {
          return (
            

              {this.state[item.id] === "穿鞋子"
                ? `${item.name}正在穿鞋子...`
                : `${item.name}已經(jīng)穿好鞋子了`}
            
          );
        })}
      
    );
  }
}

export default Page;

使用Hook組件實現(xiàn)如下：

src/hookDemo2.js

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

function Page() {
  const data = [
    { id: 1, name: "小C", time: "4000" },
    { id: 2, name: "小D", time: "8000" }
  ];
  return (
    

      {data.map(item => {
        return useHook(item);
      })}
    
  );
}

export default Page;

第二次的代碼明顯比第一次少了許多，而且如果之后產(chǎn)品如果增加了一個狀態(tài)，那明顯使用Hook實現(xiàn)的方式可以更快的適應需求的變更，代碼的維護性也變高了許多。

看完代碼應該就能很好的理解hook的使用了吧，具體代碼的運行點擊在線演示查看

在線演示

Hook給我們帶來的就是在函數(shù)的基礎(chǔ)上可以加入狀態(tài)和生命周期等函數(shù)不曾有的特性，這個特性的加入能夠讓我們更好的抽象組件，提高代碼的復用性。