Hooks 是React官方 在2018 React Conf 大會上宣布React v16.7.0-alpha（內(nèi)測）引入的，React v16.8.0 release 可以使用。
why Hooks
- 難以重用和共享狀態(tài)邏輯
- 更小粒度的組件維護(hù)，往往項(xiàng)目中類組件的邏輯比較復(fù)雜，需要處理多個(gè)互不相關(guān)的local state, 生命周期函數(shù)中可能還包含各種互不相關(guān)的邏輯。
- JavaScript 中閉包函數(shù)的性能是非?？斓?，并且得益于相對于class 更輕量的函數(shù)組件，以及避免了HOC，renderProps 等等 …
Hooks如何解決問題
- 狀態(tài)邏輯共享
- 更小粒度的組件維護(hù)，往往項(xiàng)目中類組件的邏輯比較復(fù)雜，需要處理多個(gè)互不相關(guān)的local state, 生命周期函數(shù)中可能還包含各種互不相關(guān)的邏輯。
Hooks 使用
hooks出現(xiàn)之前，函數(shù)組件就是通過props傳遞，輸入到輸出的映射邏輯；而Hooks 讓函數(shù)組件擁有和類組件一樣的local state和生命周期處理。最常用的幾個(gè)hooks是 useState, useEffect, useContext，下面詳細(xì)介紹：
useState
useState 這個(gè)方法可以為函數(shù)組件帶來 local state。
import React, {useState, useEffect } from 'react'
const Example = () => {
const [count, setCount] = useState(0)
return (
<div>
<span>{count}</span>
<button onClick={() => setCount(count+1)}>click</button>
</div>
)
}
useState 接收一個(gè)用于初始 state 的值，返回一對變量。第一個(gè)變量是存放state 的變量；第二個(gè)變量是一個(gè)函數(shù)，用于改變該狀態(tài)值，它可以接受一個(gè)值，也可以接受一個(gè)函數(shù)作為入?yún)ⅲ?當(dāng)入?yún)⑹呛瘮?shù)時(shí)，該函數(shù)的入?yún)⑹钱?dāng)前狀態(tài)值， 返回一個(gè)新的狀態(tài)值。
useEffect
useEffect 可以為函數(shù)組件帶來一些生命周期的處理。
import React, {useState, useEffect } from 'react'
const Example = () => {
useEffect(() => {
document.title = `you clicked ${count} times`
}, [count])
const [count, setCount] = useState(0)
return (
<div>
<span>{count}</span>
<button onClick={() => setCount(count+1)}>click</button>
</div>
)
}
useEffect可以看做componentDidMount、componentDidUpdate、componentWillUnmount生命周期的結(jié)合。每次render后都會調(diào)用useEffect()注冊的effect函數(shù)。當(dāng)React 渲染我們的組件時(shí)，它會記住我們的effect。
有經(jīng)驗(yàn)的js開發(fā)者可能注意到：每次rerender后執(zhí)行的effect都不同，實(shí)際上，每次rerender, React會schedule一個(gè)不同的effect,代替上一個(gè)effect.
useEffect函數(shù)的第二個(gè)參數(shù)是該effect所依賴的變量，只有當(dāng)[ ]里的變量發(fā)生改變時(shí)，才會執(zhí)行effect。例如，當(dāng)?shù)诙€(gè)參數(shù)為[]，該effect 只會在組件didMount和willUnmount后執(zhí)行。
Effects with Cleanup
useEffect的設(shè)計(jì)就把subscribe 和unSubscribe 綁定在一起啦， 當(dāng)useEffect()函數(shù)返回一個(gè)函數(shù)時(shí)，當(dāng)需要清理時(shí)，React就會調(diào)用他。
React 清理effect的時(shí)機(jī)
當(dāng)組件unmount時(shí)，React 清理effect。上面我們說過，effects 在每次render時(shí)都會執(zhí)行，因此，React 會在前一次 effect執(zhí)行后，下一次 effect 將要執(zhí)行前，以及 Unmount 時(shí)清理。
useContext
useContext 接受一個(gè)context對象（通過React.createContext生成的）作為入?yún)ⅲ?并返回當(dāng)前context的value。當(dāng)前context的value是由組件上層級的最近的 <MyContext.Provider>的value屬性決定的。當(dāng)最近的<MyContext.Provider>的value屬性值發(fā)生變化，useContext 就會觸發(fā)組組件的rerender。
const value = useContext(MyContext);
Hooks使用規(guī)則
- 只在React函數(shù)中使用hooks，不要在regular js函數(shù)中調(diào)用
- 在函數(shù)組件的top Level 中使用hooks, 不要在循環(huán)、條件語句、嵌套函數(shù)中使用，保證每次render后hooks的調(diào)用順序都是一樣的
注： React依賴hooks執(zhí)行的順序來保證各個(gè)狀態(tài)與各個(gè)useState之間的對應(yīng)關(guān)系。
custom hooks
- 可以把復(fù)用的狀態(tài)邏輯，提取出custom hooks。不同的組件使用同一個(gè)custom hook， 并不會共享狀態(tài)。
- custom hooks的命名最好以"use"開頭，方便eslint 檢查
Hooks 原理
使用hooks 的感受
- 狀態(tài)與UI的界限越來越清晰
- hooks讓函數(shù)組件的功能得到了擴(kuò)充，擁有了和類組件相似的功能，改善了“原有的React組件嵌套太深”的境況， 但通過React Devtools看到的組件樹結(jié)構(gòu)也沒有嵌套時(shí)的結(jié)構(gòu)更便于調(diào)試開發(fā)。
-
強(qiáng)大的API設(shè)計(jì)
認(rèn)真拍的照
