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

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

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

函數(shù)組件

class組件

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

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

沒有生命周期

沒有this(組件實(shí)例)

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

平時(shí)寫組件的方式就是通過props傳遞給下一個(gè)組件，有些簡(jiǎn)單的情況這樣也挺好的。但是當(dāng)項(xiàng)目不斷迭代，會(huì)發(fā)現(xiàn)當(dāng)組件被多個(gè)模塊多次引用，還是會(huì)多寫一些重復(fù)的邏輯。因?yàn)槭艿降綘顟B(tài)或者生命周期的影響，導(dǎo)致這部分邏輯卻又很難拆出來。

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

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

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

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

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

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

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

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

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

強(qiáng)制執(zhí)行 hooks 的最佳實(shí)踐

eslint-plugin-react-hooks

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

接下來就用一個(gè)實(shí)際的例子來說明一下State Hook的使用

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

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

使用class組件實(shí)現(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組件實(shí)現(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;

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

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

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

使用class組件實(shí)現(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組件實(shí)現(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)品如果增加了一個(gè)狀態(tài)，那明顯使用Hook實(shí)現(xiàn)的方式可以更快的適應(yīng)需求的變更，代碼的維護(hù)性也變高了許多。

看完代碼應(yīng)該就能很好的理解hook的使用了吧，具體代碼的運(yùn)行點(diǎn)擊在線演示查看

在線演示

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