本文基於近段時間對 hooks 碎片化的理解作一次簡單梳理, 個人部落格。同時歡迎關注基於 hooks 構建的 UI 元件庫 —— snake-design。
在 class 已經融入 React 生態的節點下, React 推出的 Hooks 具有如下優勢:
- 更簡潔的書寫;
- 相對類中的
HOC與render Props, Hooks 擁有更加自由地組合抽象的能力;
使用 Hooks 的注意項
- 在
hooks中每一次render都有自己的state和props, 這與class中存在差異, 見 Hooks 每次渲染都是閉包 - 寫出 useEffect 的所用到的依賴
在以下 demo 中, useEffect 的第二個引數傳入 [], 希望的是 useEffect 裡的函式只執行一次(類似在 componentDidMount 中執行一次, 但是注意這裡僅僅是類似, 詳細原因見上一條注意項), 頁面上每隔 1s 遞增 1。
function Demo() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => {
clearInterval(id);
};
}, []);
return count;
}但這樣達到我們預期的效果了麼? demo, 可以看到介面上只增加到 1 就停止了。原因就是傳入的第二個引數 [] 搞的鬼, [] 表示沒有外界狀態對 effect 產生干擾。流程大致如下:
- 第一次呼叫
useEffect傳入的count為 0, 於是setCount(0 + 1); - 受
useEffect第二個引數[]的影響，count仍然為 0, 所以相當於還是setCount(0 + 1);
那如何修正上述問題呢? 方法有兩個(方法一為主, 方法二為輔):
- 方法一: 將
[]改為[count] - 方法二: 將
setCount(count + 1)改為setCount(count => count + 1)。這種方法的思想是修正狀態的值而不依賴外面傳進的狀態。
不過遇到 setCount(count => count + 1) 的情況就可以考慮使用 useReducer 了。
何時使用 useReducer
使用 useState 的地方都能用 useReducer 進行替代。相較 useState, useReducer 有如下優勢:
useReducer將how(reducer) 和what(dispatch(action)) 進行抽離; 使用reducer邏輯狀態進行集中化維護;- 相比 useState, useReducer 沒有閉包問題;
- 當狀態的一個 state 依賴狀態中的另一個 state 時, 這種情況最好使用 useReducer; 可以參考 decoupling-updates-from-actions 中 Dan 列舉的 demo。
處理 useEffect 中的公用函式
function Demo() {
const [count, setCount] = useState(0);
function getFetchUrl(query) {
return `http://demo${query}`
}
useEffect(() => {
const url = getFetchUrl('react')
}, [getFetchUrl]);
useEffect(() => {
const url = getFetchUrl('redux')
}, [getFetchUrl]);
return count;
}此時 useEffect 中傳入的第二個引數 getFetchUrl 相當於每次都是新的, 所以每次都會請求資料, 那除了 [getFetchUrl] 將改為 [] 這種不推薦的寫法外，有兩種解決方法:
. 方法一: 提升 getFetchUrl 的作用域;
. 方法二: 使用 useCallback 或者 useMemo 來包裹 getFetchUrl;
React.memo修飾一個函式元件,useMemo修飾一個函式。它們本質都是運用快取。
React Hooks 內部是怎麼工作的
為了理解 React Hooks 內部實現原理, 對 useState、useEffect 進行了簡單的實現。
useState 的簡單實現
使用閉包來實現 useState 的簡單邏輯:
// 這裡使用閉包
const React = (function() {
let _val
return {
useState(initialValue) {
_val = _val || initialValue
function setVal(value) {
_val = value
}
return [_val, setVal]
}
}
})()測試如下:
function Counter() {
const [count, setCount] = React.useState(0)
return {
render: () => console.log(count),
click: () => setCount(count + 1)
}
}
Counter().render() // 0
Counter().click() // 模擬點選
Counter().render() // 1useEffect 的簡單實現
var React = (function() {
let _val, _deps
return {
useState(initialValue) {
_val = _val || initialValue
function setVal(value) {
_val = value
}
return [_val, setVal]
},
useEffect(callback, deps) {
const ifUpdate = !deps
// 判斷 Deps 中的依賴是否改變
const ifDepsChange = _deps ? !_deps.every((r, index) => r === deps[index]) : true
if (ifUpdate || ifDepsChange) {
callback()
_deps = deps || []
}
}
}
})()測試程式碼如下:
var {useState, useEffect} = React
function Counter() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log('useEffect', count)
}, [count])
return {
render: () => console.log('render', count),
click: () => setCount(count + 1),
noop: () => setCount(count), // 保持不變, 觀察 useEffect 是否被呼叫
}
}
Counter().render() // 'useEffect' 0, 'render', 0
Counter().noop()
Counter().render() // 'render', 0
Counter().click()
Counter().render() // 'useEffect' 1, 'render', 1處理多次呼叫的情形
為了在 hooks 中能使用多次 useState, useEffect, 將各個 useState, useEffect 的呼叫存進一個陣列中, 在上面基礎上進行如下改造:
const React = (function() {
const hooks = []
let currentHook = 0
return {
render(Component) {
const component = Component()
component.render()
currentHook = 0 // 重置, 這裡很關鍵, 將 hooks 的執行放到 hooks 佇列中, 確保每次執行的順序保持一致。
return component
},
useState(initialValue) {
hooks[currentHook] = hooks[currentHook] || initialValue
function setVal(value) {
hooks[currentHook] = value
}
return [hooks[currentHook++], setVal]
},
useEffect(callback, deps) {
const ifUpdate = !deps
// 判斷 Deps 中的依賴是否改變
const ifDepsChange = hooks[currentHook] ? !hooks[currentHook].every((r, index) => r === deps[index]) : true
if (ifUpdate || ifDepsChange) {
callback()
hooks[currentHook++] = deps || []
}
}
}
})()測試程式碼如下:
var {useState, useEffect} = React
function Counter() {
const [count, setCount] = useState(0)
const [type, setType] = useState('hi')
useEffect(() => {
console.log('useEffect', count)
console.log('type', type)
}, [count, type])
return {
render: () => console.log('render', count),
click: () => setCount(count + 1),
noop: () => setCount(count), // 保持不變, 觀察 useEffect 是否被呼叫
}
}
/* 如下 mock 執行了 useEffect、render; 這裡使用 React.render 的原因是為了重置 currentHook 的值 */
let comp = React.render(Counter) // useEffect 0 type hi render 0
/* 如下 mock 只執行了 render */
comp.noop()
comp = React.render(Counter) // render 0
/* 如下 mock 重新執行了 useEffect、render */
comp.click()
React.render(Counter) // useEffect 1, render 1