React Hooks 的用法

時間 2019-11-07

標籤 react hooks 用法欄目 React 简体版

原文原文鏈接

最近在寫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就能夠實現類組件的生命週期以及狀態的管理，更牛逼的是狀態管理的邏輯能夠重用，聽起來是否是很酷炫狂拽吊炸天。 javascript

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, useEffecthtml

useStatejava

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, object , boolean 等) react

該方法返回一個長度爲2的數組，數組第一個是值狀態值，數組第二個值是改變狀態值的方法，具體關於方法的命名規範，請參考React的文檔 Use the State Hook 例子中 setCount方法就相似於setState的方法，狀態的修改會觸發組件的re-render。 git

useEffect github

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不在依賴於定義類組件來實現生命週期，如今只需 import useEffect方法便可實現對應狀態的生命週期管理，而且不侷限於某個特定的class，而是針對於某個或多個特定的狀態的生命週期管理，具體關於useEffect的使用，請參考官網Using the Effect Hooks web

⚠️: useEffect方法在每次組件從新渲染的時候默認狀況下會執行的，可是你能夠設置它的執行規則（能夠設置只執行一次)，具體參考 Using the Effect Hooks

自定義hooks, redux

這一部分是最關鍵了，咱們能夠定義本身的hooks 輪子。what's more, 能夠分享定義的輪子並讓其餘開發者去使用, 我的以爲這是hook給react開發帶來的里程碑式的改變，那how to自定義一個hook呢，這一部分其實很簡單，只需定一個hook 函數, 並引入useState, useEffect 等方法來管理狀態，將須要重用的狀態邏輯抽離出來封裝到自定義的hook方法裏。具體如何實現，你們能夠參考一下個人github react-hooks , 另外歡迎你們review個人code,並提出一些issues 🙏。你們能夠看一下我那個demo 的github pages ，具體demo頁面功能👇數組