eact Hooks已經出了有段時間了，不知道大伙有沒有嘗試著去用過，下面小編帶大伙對比看下三大基礎 Hooks 和傳統 class 組件的區別和用法。

我們所指的三個基礎 Hooks 是：

• useState 在函數式組件內維護 state
• useEffect 函數式組件內有副作用的調用與 componentDidMount、componentDidUpdate 類似但又有所區別
• useContext 監聽 provider 更新變化

useState

useState 允許我們在函數式組件中維護 state，傳統的做法需要使用類組件。舉個例子：我們需要一個輸入框，隨著輸入框內容的改變，組件內部的 label 標簽顯示的內容也同時改變。下面是兩種不同的寫法：

不使用 useState：

import React from "react";
// 1
export class ClassTest extends React.Component {
 // 2
 state={
 username: this.props.initialState
 }
 // 3
 changeUserName(val) {
 this.setState({ username: val })
 }
 // 4
 render() {
 return (
 <div>
 <label style={{ display: 'block' }} htmlFor="username">username: {this.state.username}</label>
 <input type="text" name="username" onChange={e=> this.changeUserName(e.target.value)} />
 </div>
 )
 }
}

1. 我們需要定義一個類并從 React.Component 處繼承
2. 還需要初始化一個 state
3. 初始化改變 state 的方法
4. 最后還要使用 render 函數返回 JSX

使用 useState：

// 1
import React, { useState } from "react";
export function UseStateTest({ initialState }) {
 // 2
 let [username, changeUserName]=useState(initialState)
 // 3
 return (
 <div>
 <label style={{ display: 'block' }} htmlFor="username">username: {username}</label>
 <input type="text" name="username" onChange={e=> changeUserName(e.target.value)} />
 </div>
 )
}

在父組件中使用：

import React from "react";
// 引入組件
import { UseStateTest } from './components/UseStateTest'
// 4
const App=()=> (
 <div>
 <UseStateTest initialState={'initial value'} />
 </div>
)
export default App;

1. 需要從 react 中引入 useState 這個包
2. 使用 useState 方法，接收一個初始化參數，定義 state 變量，以及改變 state 的方法
3. 在需要使用的地方直接使用 state 這個變量即可，增加事件處理函數觸發改變 state 的方法
4. 在父組件中調用，通過 props 傳遞 initialState 初始化值

用 useState 方法替換掉原有的 class 不僅性能會有所提升，而且可以看到代碼量減少很多，并且不再需要使用 this，所以能夠維護 state 的函數式組件真的很好用

useEffect

useEffect 是專門用來處理副作用的，獲取數據、創建訂閱、手動更改 DOM 等這都是副作用。你可以想象它是 componentDidMount 和 componentDidUpdate 及 componentWillUnmount 的結合。

舉個例子，比方說我們創建一個 div 標簽，每當點擊就會發送 http 請求并將頁面 title 改為對應的數值：

import React from 'react'
// 1
import { useState, useEffect } from 'react'
export function UseEffectTest() {
 let [msg, changeMsg]=useState('loading...')
 // 2
 async function getData(url) { // 獲取 json 數據
 return await fetch(url).then(d=> d.json())
 }
 // 3
 async function handleClick() { // 點擊事件改變 state
 let data=await getData('https://httpbin.org/uuid').then(d=> d.uuid)
 changeMsg(data)
 }
 // 4
 useEffect(()=> { // 副作用
 document.title=msg
 })
 return (
 <div onClick={()=> handleClick()}>{msg}</div>
 )
}

1. 首先從 react 中引入 useEffect
2. 然后創建獲取數據的 getData 方法
3. 創建事件處理函數 handleClick
4. 使用 useEffect 處理副作用：改變頁面的 title

如果使用傳統的類組件的寫法：

import React from 'react'
// 1
export class ClassTest extends React.Component {
 // 2
 state={
 msg: 'loading...'
 }
 // 3
 async getData(url) { // 獲取 json 數據
 return await fetch(url).then(d=> d.json())
 }
 handleClick=async ()=> { // 點擊事件改變 state
 let data=await this.getData('https://httpbin.org/uuid').then(d=> d.uuid)
 this.setState({ msg: data })
 }
 // 4
 componentDidMount() {
 document.title=this.state.msg
 }
 componentDidUpdate() {
 document.title=this.state.msg
 }
 // 5
 render() {
 return (
 <div onClick={this.handleClick}>{this.state.msg}</div>
 )
 }
}

1. 首先創建類 ClassTest
2. 初始化 state
3. 定義獲取數據方法和事件處理函數
4. 在 componentDidMount 和 componentDidUpdate 階段改變 document.title
5. 最后通過 render 函數渲染

使用 useEffect 不僅去掉了部分不必要的東西，而且合并了 componentDidMount 和 componentDidUpdate 方法，其中的代碼只需要寫一遍。

第一次渲染和每次更新之后都會觸發這個鉤子，如果需要手動修改自定義觸發規則

見文檔：https://zh-hans.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

另外，官網還給了一個訂閱清除訂閱的例子：

使用 useEffect 直接 return 一個函數即可：

返回的函數是選填的，可以使用也可以不使用：

文檔：https://zh-hans.reactjs.org/docs/hooks-effect.html#recap

比方說我們使用 useEffect 來解綁事件處理函數：

useEffect(()=> {
 window.addEventListener('keydown', handleKeydown);
 return ()=> {
 window.removeEventListener('keydown', handleKeydown);
 }
})

useContext

useContext 的最大的改變是可以在使用 Consumer 的時候不必在包裹 Children 了，比方說我們先創建一個上下文，這個上下文里頭有一個名為 username 的 state，以及一個修改 username 的方法 handleChangeUsername

創建上下文

不使用 useState：

不使用 state hooks 的代碼如下：

import React, { createContext } from 'react'
// 1. 使用 createContext 創建上下文
export const UserContext=new createContext()
// 2. 創建 Provider
export class UserProvider extends React.Component {
 handleChangeUsername=(val)=> {
 this.setState({ username: val })
 }
 state={
 username: '',
 handleChangeUsername: this.handleChangeUsername
 }
 render() {
 return (
 <UserContext.Provider value={this.state}>
 {this.props.children}
 </UserContext.Provider>
 ) 
 }
}
// 3. 創建 Consumer
export const UserConsumer=UserContext.Consumer

看看我們做了什么：

1. 首先我們使用 createContext 創建了上下文
2. 然后我們創建 Provider；里頭定義了 handleChangeUsername 方法和 username 的 state，并返回一個包裹 this.props.children 的 Provider
3. 最后我們再返回 UserContext.Consumer

代碼比較冗長，可以使用上文提到的 useState 對其進行精簡：

使用 useState：

使用 state hooks：

import React, { createContext, useState } from 'react'
// 1. 使用 createContext 創建上下文
export const UserContext=new createContext()
// 2. 創建 Provider
export const UserProvider=props=> {
 let [username, handleChangeUsername]=useState('')
 return (
 <UserContext.Provider value={{username, handleChangeUsername}}>
 {props.children}
 </UserContext.Provider>
 )
}
// 3. 創建 Consumer
export const UserConsumer=UserContext.Consumer

使用 useState 創建上下文更加簡練。

使用上下文

上下文定義完畢后，我們再來看使用 useContext 和不使用 useContext 的區別是啥：

不使用 useContext：

import React from "react";
import { UserConsumer, UserProvider } from './UserContext'
const Pannel=()=> (
 <UserConsumer>
 {/* 不使用 useContext 需要調用 Consumer 包裹 children */}
 {({ username, handleChangeUsername })=> (
 <div>
 <div>user: {username}</div>
 <input onChange={e=> handleChangeUsername(e.target.value)} />
 </div>
 )}
 </UserConsumer>
)
const Form=()=> <Pannel></Pannel>
const App=()=> (
 <div>
 <UserProvider>
 <Form></Form>
 </UserProvider>
 </div>
)
export default App;

使用 useContext：

只需要引入 UserContext，使用 useContext 方法即可：

import React, { useContext } from "react"; // 1
import { UserProvider, UserContext } from './UserContext' // 2
const Pannel=()=> {
 const { username, handleChangeUsername }=useContext(UserContext) // 3
 return (
 <div>
 <div>user: {username}</div>
 <input onChange={e=> handleChangeUsername(e.target.value)} />
 </div>
 )
}
const Form=()=> <Pannel></Pannel>
// 4
const App=()=> (
 <div>
 <UserProvider>
 <Form></Form>
 </UserProvider>
 </div>
)
export default App;

看看做了啥：

1. 首先第一步引入useContext
2. 然后引入 UserProvider 以及上下文 UserContext
3. 再需要使用的組件中調用 useContext 方法獲取 state
4. 當然前提是要在父組件中使用 UserProvider 嵌套主 children

這樣通過 useContext 和 useState 就重構完畢了，看起來代碼又少了不少