React Hooks實踐

9月份開始，使用了React16.8的新特性React Hooks對項目進行了重構，果真，感受沒有被辜負，就像阮一峯老師所說的同樣，這個 API 是 React 的將來。

Hooks

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

說是新的特性，可是與其餘的版本的迭代不一樣，它不僅是加一點api減一點api的改變。而是完整的一套解決方案。

一個簡單的Hook

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>
  );
}

這是React官網關於react使用的第一個例子，使用Hooks的方式實現了一個計數器功能。
useState是什麼？在這裏咱們認爲useState就是一個Hook。
下面介紹 React 2個最經常使用的鉤子，useState，useEffect。

useState

這個Hook，應該是咱們使用最多的一個Hook了。經過在函數組件裏調用它來給組件添加一些內部 state。
useState方法會返回一個包含2個值的數組，第一個值是當前狀態。第二個值更新這個狀態的函數，它相似 class 組件的 this.setState，可是它不會把新的 state 和舊的 state 進行合併。咱們通常會經過解構的方式獲取其值。

使用

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

這裏咱們將內部狀態count初始化爲0，在count發生變化時，會引發組件的會從新渲染。同時，咱們經過解構的方式，給該狀態進行了賦值。

更新

<button onClick={() => setCount(count + 1)}>
        Click me
      </button>

直接調用useState返回值的第二個參數，便可完成更新。

useEffect

我在寫React ，類組件的時候，最不肯意寫的就是生命週期方法，一方面是由於生命週期方法比較多，另外一方面其實也比較容易出bug。好比說，咱們想要實現一個監聽props的某個值的變化，進而進行一些特殊操做，就可能須要兩種生命週期的方法配合。可是在Hooks裏，咱們只須要用到useEffect就能夠實現了。

使用

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 相似於componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 更新文檔的標題
    document.title = `You clicked ${count} times`;
  });

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

useEffect方法接受2個參數，第一個參數是一個函數，是在第一次渲染以及以後更新渲染以後會進行的反作用，強調一點，該函數能夠有返回值，可是該返回值必須是一個函數，會在組件被銷燬時執行。
第二個參數是可選的，是一個數組，數組中存放的是須要監聽的屬性。即當數組中的屬性發生變化時，第一個參數的函數會被調用，若是是空數組，則在第一次渲染時會被調用。
基於以上兩個最主要的Hook，咱們基本上能夠知足於咱們大部分的需求。可是若是想要對組件進行優化，則須要另外兩個Hook。useCallback和useMemo。

useCallback

useCallback接收一個內聯回調函數參數和一個依賴項數組（子組件依賴父組件的狀態，即子組件會使用到父組件的值） ，useCallback 會返回該回調函數的 memoized 版本，該回調函數僅在某個依賴項改變時纔會更新。

useMemo

useMemo把建立函數和依賴項數組做爲參數傳入 useMemo，它僅會在某個依賴項改變時才從新計算 memoized 值。這種優化有助於避免在每次渲染時都進行高開銷的計算。

基於以上的Hook咱們基本上能夠完成大部分的功能了，除了上文重點介紹的useState和useEffect，react還給咱們提供來不少有用的hooks useContext useReducer useRef useImperativeMethods useMutationEffect useLayoutEffect，這裏就不一一介紹了，若是想要使用Hooks，這些api也是須要了解的，具體使用能夠參考下面的文檔。

參考文檔

React 官網