React Hooks 從入門到放棄(一)

時間 2020-01-09

標籤 react hooks 入門放棄欄目 React 简体版

原文原文鏈接

本文默認讀者對 React Hooks 已經有必定的瞭解。所以再也不贅述 Hooks API 的使用了, 還未了解的同窗能夠去官網閱讀React Hooks API Referencejavascript

React Hooks 基礎

使用 React Hooks 就不得不提到 React 函數組件。html

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called 「props」) and return React elements describing what should appear on the screen.java

從官網上的介紹來看, 組件就像 JavaScript 的函數, 它接收一些入參(props), 並返回 React 元素。react

在咱們最初學習使用 React 框架時, 首先了解的是經過Class書寫組件, 這樣能夠很好地理解並規劃類組件的數據與方法, 並且生命週期可讓咱們更清晰地瞭解組件的加載以及更新狀態的觸發時機。git

那函數組件呢? 函數組件自己解決了從數據到 React 元素的映射, 而Hooks則在此基礎上提供了數據存儲以及 Side Effect(反作用)的處理。github

此時此刻, 讓咱們忘記已經熟知的Class與生命週期, 來從新認識函數組件 + Hooks的 React。typescript

0. 函數組件

函數組件是用來處理一些簡單的 UI 組件, 經過 Props 傳入的數據, 抽象封裝一些組件。數組

function Header(props) {
    const { title, description, avatar } = props;
    return (
        <div> <img src={avatar} /> <h1>{title}</h1> <p>{description}</p> </div> ); } 複製代碼

限制了函數組件使用的緣由一方面在於它沒有內部數據, 另外一方面就是沒有生命週期, 所以沒法實現具備必定交互與邏輯的功能。閉包

1. 使用 React Hooks 時的數據存儲

函數組件內定義的變量不是固化的, 執行完成後, 函數內的變量就會被清理掉了(非閉包狀況)。因此, 咱們須要經過 Hooks 固化組件須要的一些數據。app

Edit on CodeSandbox

上面是 React Hooks 之 useState 的使用例子, 以下是淺嘗輒止的理解:

經過useState, 咱們在某個地方定義了一個對象, 並掛載到某個不會讓它消失的地方。useState方法返回的第一個值就是咱們要的數據。useState方法返回的第二個值是一個函數, 能夠設置這個對象的值, 而後會觸發函數從新渲染。

上面這坨話說的很模糊, 某個地方究竟是哪一個地方, 定義了一個什麼樣的對象, 又掛載到了什麼地方。設置了新值後又是怎麼觸發渲染的???

若是想從根源上填上這個坑, 大概是須要閱讀源碼瞭解 Hooks 的基礎實現的 Github 源碼連接。

在瞭解Hook加載前仍是要了解一下 Hook 的定義和存儲的。

下面是Hook的 type 定義

export type Hook = {
  // 數據
  memoizedState: any,
  // 下面這些暫時不須要了解
  baseState: any,
  baseQueue: Update<any, any> | null,
  queue: UpdateQueue<any, any> | null,
  // 鏈表下一個節點的指針
  next: Hook | null,
};

複製代碼

咱們須要瞭解的是Hook是經過鏈表存儲的

本文嘗試經過流程圖來簡述下這裏的邏輯。(下面的流程圖是不完整的!沒有對比依賴更新)

函數組件第一次執行時

第一個 Hook 會掛載到React Fiber Node上, 以後在函數執行遇到的 Hook 會依次按順序掛載到 Hook 節點後。

函數組件更新渲染時

函數執行遇到的 Hooks 會按照順序讀取React Fiber Node上的 Hook 節點。

如上圖所示, 函數組件從新執行時是依賴 Hooks 隊列的順序的。若是在條件判斷中使用 Hook 就會讓這個隊列錯亂。

所以也就會有以下官網提示:

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.

2. 使用 React Hooks 處理反作用

反作用(Side Effect), 我的理解, 是在數據->視圖的轉化過程當中, 出現的一些特別的時機。咱們能夠利用這些時機去處理一些業務邏輯。

如下是使用useEffect的一個簡單的計數 Demo.

Edit on CodeSandbox

使用useEffect去實如今渲染完成以後要去處理的一些事情。你們也能夠在官網的 API Reference 中找到 React useEffect 說明。

咱們能夠經過流程圖加深理解useEffect這個 Hook。

以上是useEffectHook 的大體執行邏輯, 經過此圖會發現useEffect多了一步數據比對的過程, 只有當如下條件成立時, SideEffect 纔會觸發調用。

useEffect 第一次執行之時
useEffect 的依賴存在變動之時

咱們修改上面計數的例子就能夠更好的理解兩個 Hook。

Edit on CodeSandbox

function Demo(props) {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(step + count);
    }, 1000)
    return () => {
      clearTimeout(timer);
    }
  }, [count]);

  return (
    <div> <div>Count: {count}</div> <div>Step: {step}</div> <button onClick={() => { setCount(count + 1); }} > Click </button> </div>);
}

複製代碼