React Hooks 的用法

前端麥克發表於2019-04-05
ReactHook
最近在寫React專案的時候遇到了一些state logic重用的問題，由於react裡面對於state的定義是元件的生命週期只存在與元件自身內，如果要實現元件與元件之前的通訊，傳統的做法是通過將元件互動的那一部分state程式碼上升到共同的parent元件上去，在parent裡面定義一些實現狀態改變的方法，然後通過props的方式傳遞下去，這樣的做法雖然很合理，但是不太適合有著複雜層級關係的專案，後來就有了redux這個狀態管理機制來統一管理元件的狀態，將共用的狀態抽離出來放在一個store裡面統一管理，通過dispatch action的方式對映到reduce裡面相應的actionType 來實現state的更新，這樣雖然很好的管理了狀態的變化，但是有一個問題還是沒有解決，那就是元件的state 邏輯的重用，說到這裡就要講到一個新概念 Hooks，這個是在React 16.8.0版本後提出的一個新概念。 

Hooks的背景

It’s essentially a way to create components with features, like state, without the need for class components.

以上是react官方對於hooks的解釋，簡單點說就是用了hooks後，不需要建立類元件了，傳統的無狀態函式式元件搭載了hooks可能實現類元件的生命週期以及狀態的管理，更牛逼的是狀態管理的邏輯可以重用， 聽起來是不是很酷炫狂拽吊炸天。 

Hooks

 A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components. We’ll learn other Hooks later. 

React官方已經定了一些內建的hooks，在這裡我就不一一介紹了，我主要介紹兩個常用的hooks, useState, useEffect

useState

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);複製程式碼

話不多說，先上程式碼，useState是一個方法，該方法只接受一個引數 initState, 可以任意一種資料型別，可以是一個number, 也可以是一個物件, 或者string, boolean. 

該方法返回一個長度為2的陣列，陣列第一個是狀態值，陣列第二個值是改變狀態值的方法，具體該方法的name規範，請參考React的文件 Use the State Hook  例子當中 setCount方法類似與setState的方法，狀態的修改會觸發重新的render。 

useEffect 

By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative 
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>
  );
}複製程式碼

由於引進了hooks後，React不在依賴於定義於class來設定生命週期，useEffect就是來管理useState裡面設定的狀態，不侷限於一個特定的class，而是針對於某個或多個特定的狀態的生命週期管理，具體關於useEffect的使用，請參考官網Using the Effect Hooks  

⚠️: useEffect方法在每次render的時候，預設的情況下會執行一次，但是你可以設定它的執行規則，具體參考 Using the Effect Hooks

自定義hooks, 

這一部分是最關鍵了，我們可以定義自己的hooks 輪子。what's more, 可以分享定義的輪子並讓其他開發者去使用，這在之前的React的裡面是一個里程碑的改變，如果自定義hooks內，這一部分也很簡單，就是定一個hook function, 並引入useState, useEffect 等方法來管理狀態，將需要重用的狀態邏輯抽離出來封裝到自定義的hook方法裡。 具體如何實現，大家可以參考一下我的github react-hooks , 歡迎大家review我的code,並提出一些issues ?。 大家可以看一下我那個demo 的github pages 

React Hooks 的用法

總結： 

hooks 幫助擺脫定義繁瑣的class 元件的束縛，同時封裝重用的自定義hooks的邏輯。 

useState, useEffect 等內建的hooks來幫助創造hooks的生態圈，實現state 邏輯的共享。 

⚠️踩過的坑：在專案裡面如果在不同的元件裡面都引用同樣的hook, 該hook裡面定義的state並不會共享，而是相互獨立的，這一點大家自己測試一下。


這是第一次寫技術文件，希望各位大咖多給點建議，feedback is always important for improvment.  如果大家覺得我寫的那個react-hooks demo不錯的話，大家給個star吧?。


相關文章