Hooks的介紹和初體驗

Hooks出現(xiàn)的原因

Hook 是 React 16.8 的新增特性，它可以讓我們在不編寫class的情況下, 使用state以及其他的React特性(比如生命周期)。

我們先來思考一下class組件相對于函數(shù)式組件有什么優(yōu)勢?比較常見的是下面這些優(yōu)勢:

class組件可以定義自己的state，用來保存組件自己內(nèi)部的狀態(tài);

import React, { PureComponent } from 'react'

// 類組件
class HellWorld extends PureComponent {
  constructor() {
    super()

    // 類組件可以在state中保存自己的狀態(tài)
    this.state = {
      message: "Hello World"
    }
  }

  render() {
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
      </div>
    )
  }
}

export class App extends PureComponent {
  render() {
    return (
      <div>
        <HellWorld/>
      </div>
    )
  }
}

export default App

函數(shù)式組件不可以，因為函數(shù)每次調(diào)用都會產(chǎn)生新的臨時變量;

例如下面代碼中, 看起來似乎是有保存狀態(tài), 但是其實是有兩大致命缺陷的

• 第一: 我們?nèi)绻幸恍┎僮鲃討B(tài)的修改了message這個狀態(tài), 其實這個函數(shù)組件是不知道要重新渲染的(意味著哪怕修改了message, 頁面也不會刷新)
• 第二: 就算頁面重現(xiàn)渲染, 意味著這個函數(shù)組件會重新執(zhí)行, 那么就會重新將最初始的值賦值給message(口水話來說就是, 函數(shù)重新執(zhí)行, 修改了也白修改)

import React, { PureComponent } from 'react'

// 函數(shù)組件
function HelloHooks() {
  // 就算函數(shù)重新執(zhí)行, 又會重新賦值, 無意義
  let message = "Hello Hooks"

  return(
    <div>
      <h2>{message}</h2>
    </div>
  )
}

export class App extends PureComponent {
  render() {
    return (
      <div>
        <HellWorld/>
        <HelloHooks/>
      </div>
    )
  }
}

export default App

class組件有自己的生命周期，我們可以在對應(yīng)的生命周期中完成自己的邏輯;

比如在componentDidMount中發(fā)送網(wǎng)絡(luò)請求，并且該生命周期函數(shù)只會執(zhí)行一次;

函數(shù)式組件在學(xué)習(xí)hooks之前，是沒有類似于生命周期這樣的函數(shù)

如果在函數(shù)中發(fā)送網(wǎng)絡(luò)請求，意味著每次重新渲染都會重新發(fā)送一次網(wǎng)絡(luò)請求, 這種不必要的重新發(fā)送網(wǎng)絡(luò)請求是非常影響性能的;

class組件可以在狀態(tài)改變時, 只重新執(zhí)行render函數(shù)以及我們希望重新調(diào)用的生命周期函數(shù);

函數(shù)式組件在重新渲染時，整個函數(shù)都會被執(zhí)行，似乎沒有什么地方可以只讓它們調(diào)用一次;

所以，在Hook出現(xiàn)之前，對于上面這些情況我們通常都會編寫class組件, 沒辦法在函數(shù)組件中編寫。

類組件存在的問題

復(fù)雜組件變得難以理解:

我們在最初編寫一個class組件時，往往邏輯比較簡單，并不會非常復(fù)雜。但是隨著業(yè)務(wù)的增多，我們的class組件會變得越來越復(fù)雜;

比如componentDidMount中，可能就會包含大量的邏輯代碼:包括網(wǎng)絡(luò)請求、一些事件的監(jiān)聽(還需要在 componentWillUnmount中移除);

而對于這樣的class實際上非常難以拆分:因為它們的邏輯往往混在一起，強行拆分反而會造成過度設(shè)計，增加代碼的復(fù)雜度;

難以理解的class:

對于有些人來說學(xué)習(xí)ES6的class也 是學(xué)習(xí)React的一個障礙。

比如在class中，我們必須搞清楚this的指向到底是誰，所以需要花很多的精力去學(xué)習(xí)this;

雖然我認(rèn)為前端開發(fā)人員必須掌握this，但是依然處理起來非常麻煩;

組件復(fù)用狀態(tài)很難:

在前面為了一些狀態(tài)的復(fù)用我們需要通過高階組件;

像我們之前學(xué)習(xí)的redux中connect或者react-router(6版本之前)中的withRouter，這些高階組件設(shè)計的目的就是為了狀態(tài)的復(fù)用;

或者類似于Provider、Consumer來共享一些狀態(tài)，但是多次使用Consumer時，我們的代碼就會存在很多嵌套;

這些代碼讓我們不管是編寫和設(shè)計上來說，都變得非常困難;

Hooks的使用注意

Hook的出現(xiàn)，可以解決上面提到的這些問題;

簡單總結(jié)一下hooks:

它可以讓我們在不編寫class的情況下, 使用state以及其他的React特性(意味著不學(xué)習(xí)class關(guān)鍵字和this指向依然可以編寫React);

但是我們可以由此延伸出非常多的用法，來讓我們前面所提到的問題得到解決;

Hook的使用場景:

Hook的出現(xiàn)基本可以代替我們之前所有使用class組件的地方;

但是如果是一個舊的項目，你并不需要直接將所有的代碼重構(gòu)為Hooks，因為它完全向下兼容，你可以漸進式的來使用它;

Hook只能在函數(shù)組件中使用，不能在類組件或者函數(shù)組件之外的地方使用;

在我們繼續(xù)學(xué)習(xí)Hooks之前，請記住以下幾點:

完全可選的: 你在項目中無需重寫任何已有代碼, 就可以在一些組件中嘗試使用Hook。但是如果你不想，你不必現(xiàn)在就去學(xué)習(xí)或使用 Hook(不使用Hook也是OK的)。

100% 向后兼容的: 沒有兼容性問題, Hook 不包含任何破壞性改動。

現(xiàn)在可用: Hook 已發(fā)布于 v16.8.0, 現(xiàn)在已經(jīng)非常穩(wěn)定, 可以放心使用。

計數(shù)器案例的對比

接下來我們通過一個計數(shù)器案例，分別使用class組件和結(jié)合了hooks的函數(shù)式組件進行對比:

類組件的實現(xiàn)

import React, { PureComponent } from 'react'

export class Counter1 extends PureComponent {
  constructor() {
    super()

    this.state = {
      counter: 10
    }
  }

  changeNumber(num) {
    this.setState({
      counter: this.state.counter + num
    })
  }

  render() {
    const { counter } = this.state

    return (
      <div>
        <h2>當(dāng)前計數(shù): {counter}</h2>
        <button onClick={() => this.changeNumber(-1)}>-1</button>
        <button onClick={() => this.changeNumber(1)}>+1</button>
      </div>
    )
  }
}

export default Counter1

函數(shù)組件的實現(xiàn), 在下面我有使用一個hook函數(shù)useState, 先體驗一下, 下一篇文章就會詳細(xì) 講解這個hook函數(shù)的用法

import { memo, useState } from "react"

const Counter2 = memo(() => {
  const [ counter, setCounter ] = useState(100)
  
  return (
    <div>
      <h2>當(dāng)前計數(shù): {counter}</h2>
      <button onClick={() => setCounter(counter - 1)}>-1</button>
      <button onClick={() => setCounter(counter + 1)}>+1</button>
    </div>
  )
})

export default Counter2

可以發(fā)現(xiàn)上面的代碼差異非常大:

函數(shù)式組件結(jié)合hooks讓整個代碼變得非常簡潔

并且再也不用考慮this相關(guān)的問題;