作為一個(gè)用慣了Class、用慣了生命周期開(kāi)發(fā)的前端老鳥(niǎo)，接觸到React Hook的心情是這樣的

image.png

真的有趣又神奇！
而且，它還很簡(jiǎn)單。有了它，我們可以省略很多的代碼，簡(jiǎn)化很多的邏輯，給我的感覺(jué)，它就是一個(gè)帶有狀態(tài)和生命周期的加強(qiáng)版的公共方法。當(dāng)然這是個(gè)人感覺(jué)，我們還需要知道官方給它的定義，即

Hook 是 React 16.8 的新增特性。它可以讓你在不編寫(xiě) class 的情況下使用 state 以及其他的 React 特性。

一、組件類(lèi)的缺陷

關(guān)于組件類(lèi)的缺陷，官網(wǎng)已明確給出3個(gè)，即

1. 組件之間復(fù)用狀態(tài)邏輯很難
2. 復(fù)雜組件變得難以理解
3. 難以理解的class

當(dāng)然，這樣太抽象，我們看一個(gè)具體的例子，來(lái)直觀地感受一下它的好。
如果我們需要寫(xiě)一個(gè)計(jì)數(shù)器的組件類(lèi)，原先我們會(huì)這樣寫(xiě)

import React from 'react'
class Example extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }
  
    render() {
      return (
        <div>
          <p>You clicked {this.state.count} times</p>
          <button onClick={() => this.setState({ count: this.state.count + 1 })}>
            Click me
          </button>
        </div>
      );
    }
  }
  export default Example

而現(xiàn)在我們只需要這樣寫(xiě)

import React, { useState } from 'react';

function Example() {
  // 聲明一個(gè)叫 "count" 的 state 變量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default Example

哇哦，如此簡(jiǎn)單。這還只是一個(gè)極其簡(jiǎn)單的組件，如果是一個(gè)比較復(fù)雜的組件，可想而知，我們會(huì)精簡(jiǎn)多少代碼，就好像一個(gè)負(fù)重前行的人，扔掉了一堆無(wú)用的東西，開(kāi)始輕裝簡(jiǎn)行，走得更快，更瀟灑了。
so,這么好的東西，就讓我們見(jiàn)識(shí)一下它的具體用法吧。

二、常用鉤子

• useState()
• useEffect()

以上，是我們最常用的鉤子，下面我們來(lái)一一介紹

三、 useState() 狀態(tài)鉤子

還是計(jì)數(shù)器的例子

import React, { useState } from 'react';

function Example() {
  // 聲明一個(gè)叫 "count" 的 state 變量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default Example

做了什么: 可以看到，useState為我們定義了一個(gè)叫做count的'state變量'。
參數(shù)： useState的唯一參數(shù)，就是初始state。不同于 class 的是，我們可以按照需要使用數(shù)字或字符串對(duì)其進(jìn)行賦值，而不一定是對(duì)象。
返回值: 當(dāng)前 state 以及更新 state 的函數(shù)。
如果，你想定義多個(gè)state，那就多次使用useState就可以了，就像這樣

  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: '學(xué)習(xí) Hook' }]);

四、 useEffect() 副作用鉤子

ok，現(xiàn)在我們可以使用state,然后，不可避免地，我們還需要做一些其他操作，比如更改dom,發(fā)送網(wǎng)絡(luò)請(qǐng)求等，這樣我們?cè)撊绾巫瞿兀?/p>

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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default Example

像這樣，我們將dom操作放進(jìn)useEffect鉤子里，就可以了。我們?nèi)匀粡娜齻€(gè)方面來(lái)剖析一下
做了什么:通過(guò)使用這個(gè) Hook，你可以告訴 React 組件需要在渲染后執(zhí)行某些操作。React 會(huì)保存你傳遞的函數(shù)（我們將它稱(chēng)之為 “effect”），并且在執(zhí)行 DOM 更新之后調(diào)用它。

為什么在組件內(nèi)部調(diào)用 useEffect？:將 useEffect 放在組件內(nèi)部讓我們可以在 effect 中直接訪問(wèn) count state 變量（或其他 props）。我們不需要特殊的 API 來(lái)讀取它 —— 它已經(jīng)保存在函數(shù)作用域中。Hook 使用了 JavaScript 的閉包機(jī)制，而不用在 JavaScript 已經(jīng)提供了解決方案的情況下，還引入特定的 React API。

useEffect 會(huì)在每次渲染后都執(zhí)行嗎？: 是的，默認(rèn)情況下，它在第一次渲染之后和每次更新之后都會(huì)執(zhí)行。

ok,學(xué)習(xí)到這里，希望大家應(yīng)該對(duì)React Hook有了初步的印象，你可以把他拆分成兩部分 狀態(tài) + 副作用(代碼邏輯) 去理解。

既然是初識(shí)，就求個(gè)簡(jiǎn)單明了。有機(jī)會(huì)再給大家?guī)?lái)Hook的更多玩法啦~~~

參考:

React官方文檔