[React Hooks 翻譯] 1-8 介紹Hooks

Hooks 是 React 16.8的新特性。使用Hooks，咱們不用去寫Class也能使用state，還有一些其餘的React特性。

import React, { useState } from 'react';

function Example() {
  // 在這裏咱們聲明瞭一個新的state變量，叫count
  const [count, setCount] = useState(0);

  return (
    <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
  );
}
複製代碼

useState是咱們第一個接觸到的Hook，沒看懂這個例子也不要緊。後面會繼續介紹。

你能夠在下一頁直接開始學習Hooks。在這篇文章中，咱們將會介紹爲何要引入Hooks，以及如何使用Hooks幫助咱們更好的編寫組件。

Note

React 16.8.0是第一個支持Hooks的版本。升級時，不要忘記更新全部包，包括React DOM。 React Native將在下一個穩定版本中支持Hook。

視頻介紹

在React Conf 2018中，Sophie Alpert和Dan Abramov介紹了Hooks，隨後Ryan Florence演示瞭如何重構應用程序以使用它們。觀看視頻：

youtu.be/dpw9EHDh2bM…

沒有Breaking Changes

Hooks是

• 徹底是可選的。可使用Hooks而無需重寫任何現有代碼。不想學如今也沒必要學習或使用Hooks。
• 100％向後兼容。
• 已經可用了（16.8以後的版本）

1. 沒有任何移除class的想法
2. Hooks沒有顛覆你對React的概念
3. 如何你想開始學習如何使用Hook，你能夠直接跳到下一篇

爲何要新增Hooks

解決了不少問題。好比：

組件間複用有關state的邏輯很困難

React沒有提供將可複用的行爲(reusable behavior)附加到組件上的方法，好比鏈接一個store。

1. render props 和 HOC 的不足 若是你用過React，你可能知道 render屬性 和 HOC 試着去解決這個問題。可是這種模式須要你在用的時候重構組件，這很麻煩，並且代碼維護性也很差。
2. 嵌套地獄 若是你打開React DevTools，你可能會發現providers, consumers,HOC, render props, 或者其餘的抽象組件一層裹着一層，形成「嵌套地獄」。React意識到了這個問題，提供了一種過濾的方法（ filter them out in DevTools ），但這反映了一個問題：React須要一種更簡潔的方式處理有關state複用的邏輯

Hooks的優點：

能夠把有關state的邏輯從組件中抽離出來，而且不改變組件的層級結構。這樣對代碼的複用和測試都更友好。

We’ll discuss this more in Building Your Own Hooks.

複雜組件難以理解

組件剛開始寫很簡單，可是有關state的邏輯和反作用越寫越多，組件就變得難以管理

1. 沒有關聯的邏輯混在一塊兒：咱們常常在每一個生命週期函數裏都把一些沒有關聯的邏輯混在一塊兒。
2. 有關聯的邏輯散在各處：好比說，在componentDidMount和componentDidUpdate裏去獲取數據，就須要執行addEventListener之類的操做，而後componentWillUnmount的使用就要去removeEventListener。添加和清理監聽器是相互關聯的代碼

由於組件裏面有關state的邏輯處處都是，因此不少狀況下咱們沒法將組件拆分紅更小的組件，而且這樣也不利於測試。這就是不少人更喜歡將React和單獨的狀態管理的庫結合的緣由之一。

Hook的優點：

能夠將組件基於邏輯的關聯性拆分紅更小的函數，好比說訂閱消息、獲取數據之類的，而不是基於生命週期拆分相關邏輯。你也能夠經過一個reducer來管理組件的內部state

Class會引發困惑

class語法讓人疑惑，好比下面這幾個方面：

1. 必須理解this關鍵詞在JavaScript裏如何工做
2. 在事件處理方法中綁定this
3. 在React裏什麼時候使用function組件仍是class組件也有爭議。
4. 像Svelte、Angular、Glimmer所展現的那樣，組件的 ahead-of-time compilation 展示了很大的潛力，特別是組件再也不侷限於模板。最近咱們用Prepack作了一些有關 component folding 的試驗，看到了頗有前景的結果。可是咱們發現class組件容易讓人無心識地使用一些模式，致使優化失敗。
5. class體積壓縮不夠好
6. 使熱加載不穩定

因此咱們想要推出能讓代碼更優化的API。

Hook的優點：

class看起來很差，用Hook能夠不寫class

漸進策略

沒有從React中移除class的計劃

對於有好奇心的讀者，咱們準備了這篇來深刻更多的細節