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

image.png

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

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

一、組件類的缺陷

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

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

當然，這樣太抽象，我們看一個具體的例子，來直觀地感受一下它的好。
如果我們需要寫一個計數(shù)器的組件類，原先我們會這樣寫

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)在我們只需要這樣寫

import React, { useState } from 'react';

function Example() {
  // 聲明一個叫 "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

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

二、常用鉤子

• useState()
• useEffect()

以上，是我們最常用的鉤子，下面我們來一一介紹

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

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

import React, { useState } from 'react';

function Example() {
  // 聲明一個叫 "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為我們定義了一個叫做count的'state變量'。
參數(shù)： useState的唯一參數(shù)，就是初始state。不同于 class 的是，我們可以按照需要使用數(shù)字或字符串對其進行賦值，而不一定是對象。
返回值: 當前 state 以及更新 state 的函數(shù)。
如果，你想定義多個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ò)請求等，這樣我們該如何做呢？

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

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

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

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

既然是初識，就求個簡單明了。有機會再給大家?guī)鞨ook的更多玩法啦~~~

參考:

React官方文檔