react hooks實現原理解析
react hooks 實現
Hooks 解決瞭什麼問題
在 React 的設計哲學中，簡單的來說可以用下面這條公式來表示：
UI = f(data)
等號的左邊時 UI 代表的最終畫出來的界面；等號的右邊是一個函數，也就是我們寫的 React 相關的代碼；data 就是數據，在 React 中，data 可以是 state 或者 props。
UI 就是把 data 作為參數傳遞給 f 運算出來的結果。這個公式的含義就是，如果要渲染界面，不要直接去操縱 DOM 元素，而是修改數據，由數據去驅動 React 來修改界面。
我們開發者要做的，就是設計出合理的數據模型，讓我們的代碼完全根據數據來描述界面應該畫成什麼樣子，而不必糾結如何去操作瀏覽器中的 DOM 樹結構。
總體的設計原則：
- 界面完全由數據驅動
- 一切皆組件
- 使用 props 進行組件之間通訊
與之帶來的問題有哪些呢？
- 組件之間數據交流耦合度過高，許多組件之間需要共享的數據需要層層的傳遞；傳統的解決方式呢！
- 變量提升
- 高階函數透傳
- 引入第三方數據管理庫，redux、mobx
- 以上三種設計方式都是，都是將數據提升至父節點或者最高節點，然後數據層層傳遞
- ClassComponet 生命周期的學習成本，以及強關聯的代碼邏輯由於生命周期鉤子函數的執行過程，需要將代碼進行強行拆分；常見的：
class SomeCompoent extends Component {
componetDidMount() {
const node = this.refs['myRef'];
node.addEventListener('mouseDown', handlerMouseDown);
node.addEventListener('mouseUp', handlerMouseUp)
}
...
componetWillunmount() {
const node = this.refs['myRef'];
node.removeEventListener('mouseDown', handlerMouseDown)
node.removeEventListener('mouseUp', handlerMouseUp)
}
}
可以說 Hooks 的出現上面的問題都會迎刃而解
Hooks API 類型
據官方聲明，hooks 是完全向後兼容的，class componet 不會被移除，作為開發者可以慢慢遷移到最新的 API。
Hooks 主要分三種：
- State hooks : 可以讓 function componet 使用 state
- Effect hooks : 可以讓 function componet 使用生命周期和 side effect
- Custom hooks: 根據 react 提供的 useState、useReducer、useEffect、useRef等自定義自己需要的 hooks
下面我們來瞭解一下 Hooks。
首先接觸到的是 State hooks
useState 是我們第一個接觸到 React Hooks，其主要作用是讓 Function Component 可以使用 state，接受一個參數做為 state 的初始值，返回當前的 state 和 dispatch。
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}> Click me </button>
</div>
);
}
其中 useState 可以多次聲明；
function FunctionalComponent () {
const [state1, setState1] = useState(1)
const [state2, setState2] = useState(2)
const [state3, setState3] = useState(3)
return <div>{state1}{...}</div>
}
與之對應的 hooks 還有 useReducer，如果是一個狀態對應不同類型更新處理，則可以使用 useReducer。
其次接觸到的是 Effect hooks
useEffect 的使用是讓 Function Componet 組件具備 life-cycles 聲明周期函數；比如 componetDidMount、componetDidUpdate、shouldCompoentUpdate 以及 componetWiillunmount 都集中在這一個函數中執行，叫 useEffect。這個函數有點類似 Redux 的 subscribe，會在每次 props、state 觸發 render 之後執行。(在組件第一次 render和每次 update 後觸發)。
為什麼叫 useEffect 呢？官方的解釋：因為我們通常在生命周期內做很多操作都會產生一些 side-effect (副作用) 的操作，比如更新 DOM，fetch 數據等。
useEffect 是使用：
import React, { useState, useEffect } from 'react';
function useMousemove() {
const [client, setClient] = useState({x: 0, y: 0});
useEffect(() => {
const handlerMouseCallback = (e) => {
setClient({
x: e.clientX,
y: e.clientY
})
};
// 在組件首次 render 之後， 既在 didMount 時調用
document.addEventListener('mousemove', handlerMouseCallback, false);
return () => {
// 在組件卸載之後執行
document.removeEventListener('mousemove', handlerMouseCallback, false);
}
})
return client;
}
其中 useEffect 隻是在組件首次 render 之後即 didMount 之後調用的，以及在組件卸載之時即 unmount 之後調用，如果需要在 DOM 更新之後同步執行，可以使用 useLayoutEffect。
最後接觸到的是 custom hooks
根據官方提供的 useXXX API 結合自己的業務場景，可以使用自定義開發需要的 custom hooks，從而抽離業務開發數據，按需引入；實現業務數據與視圖數據的充分解耦。
Hooks 實現方式
在上面的基礎之後，對於 hooks 的使用應該有瞭基本的瞭解，下面我們結合 hooks 源碼對於 hooks 如何能保存無狀態組件的原理進行剝離。
Hooks 源碼在 Reactreact-reconclier** 中的 ReactFiberHooks.js ，代碼有 600 行，理解起來也是很方便的
Hooks 的基本類型：
type Hooks = {
memoizedState: any, // 指向當前渲染節點 Fiber
baseState: any, // 初始化 initialState， 已經每次 dispatch 之後 newState
baseUpdate: Update<any> | null,// 當前需要更新的 Update ，每次更新完之後，會賦值上一個 update，方便 react 在渲染錯誤的邊緣，數據回溯
queue: UpdateQueue<any> | null,// UpdateQueue 通過
next: Hook | null, // link 到下一個 hooks，通過 next 串聯每一 hooks
}
type Effect = {
tag: HookEffectTag, // effectTag 標記當前 hook 作用在 life-cycles 的哪一個階段
create: () => mixed, // 初始化 callback
destroy: (() => mixed) | null, // 卸載 callback
deps: Array<mixed> | null,
next: Effect, // 同上
};
React Hooks 全局維護瞭一個 workInProgressHook 變量，每一次調取 Hooks API 都會首先調取 createWorkInProgressHooks 函數。參考React實戰視頻講解：進入學習
function createWorkInProgressHook() {
if (workInProgressHook === null) {
// This is the first hook in the list
if (firstWorkInProgressHook === null) {
currentHook = firstCurrentHook;
if (currentHook === null) {
// This is a newly mounted hook
workInProgressHook = createHook();
} else {
// Clone the current hook. workInProgressHook = cloneHook(currentHook);
}
firstWorkInProgressHook = workInProgressHook;
} else {
// There's already a work-in-progress. Reuse it. currentHook = firstCurrentHook;
workInProgressHook = firstWorkInProgressHook;
}
} else {
if (workInProgressHook.next === null) {
let hook;
if (currentHook === null) {
// This is a newly mounted hook
hook = createHook();
} else {
currentHook = currentHook.next;
if (currentHook === null) {
// This is a newly mounted hook
hook = createHook();
} else {
// Clone the current hook. hook = cloneHook(currentHook);
}
}
// Append to the end of the list
workInProgressHook = workInProgressHook.next = hook;
} else {
// There's already a work-in-progress. Reuse it. workInProgressHook = workInProgressHook.next;
currentHook = currentHook !== null ? currentHook.next : null;
}
}
return workInProgressHook;
}
假設我們需要執行以下 hooks 代碼：
function FunctionComponet() {
const [ state0, setState0 ] = useState(0);
const [ state1, setState1 ] = useState(1);
useEffect(() => {
document.addEventListener('mousemove', handlerMouseMove, false);
...
...
...
return () => {
...
...
...
document.removeEventListener('mousemove', handlerMouseMove, false);
}
})
const [ satte3, setState3 ] = useState(3);
return [state0, state1, state3];
}
當我們瞭解 React Hooks 的簡單原理，得到 Hooks 的串聯不是一個數組，但是是一個鏈式的數據結構，從根節點 workInProgressHook 向下通過 next 進行串聯。這也就是為什麼 Hooks 不能嵌套使用，不能在條件判斷中使用，不能在循環中使用。否則會破壞鏈式結構。
問題一：useState dispatch 函數如何與其使用的 Function Component 進行綁定
下面我們先看一段代碼：
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
const useWindowSize = () => {
let [size, setSize] = useState([window.innerWidth, window.innerHeight])
useEffect(() => {
let handleWindowResize = event => {
setSize([window.innerWidth, window.innerHeight])
}
window.addEventListener('resize', handleWindowResize)
return () => window.removeEventListener('resize', handleWindowResize)
}, [])
return size
}
const App = () => {
const [ innerWidth, innerHeight ] = useWindowSize();
return (
<ul>
<li>innerWidth: {innerWidth}</li>
<li>innerHeight: {innerHeight}</li>
</ul>
)
}
ReactDOM.render(<App/>, document.getElementById('root'))
useState 的作用是讓 Function Component 具備 State 的能力，但是對於開發者來講，隻要在 Function Component 中引入瞭 hooks 函數，dispatch 之後就能夠作用就能準確的作用在當前的組件上，不經意會有此疑問，帶著這個疑問，閱讀一下源碼。
function useState(initialState）{ return useReducer(
basicStateReducer, // useReducer has a special case to support lazy useState initializers (initialState: any), );}function useReducer(reducer, initialState, initialAction) { // 解析當前正在 rendering 的 Fiber
let fiber = (currentlyRenderingFiber = resolveCurrentlyRenderingFiber()); workInProgressHook = createWorkInProgressHook(); // 此處省略部分源碼 ... ... ... // dispathAction 會綁定當前真在渲染的 Fiber， 重點在 dispatchAction 中 const dispatch = dispatchAction.bind(null, currentlyRenderingFiber,queue,) return [workInProgressHook.memoizedState, dispatch];}function dispatchAction(fiber, queue, action) { const alternate = fiber.alternate; const update: Update<S, A> = { expirationTime, action, eagerReducer: null, eagerState: null, next: null, }; ...... ...... ...... scheduleWork(fiber, expirationTime);}
到此這篇關於react hooks實現原理的文章就介紹到這瞭,更多相關react hooks原理內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- 30分鐘帶你全面瞭解React Hooks
- 深入理解React State 原理
- React-hooks面試考察知識點匯總小結(推薦)
- React hooks useState異步問題及解決
- React中10種Hook的使用介紹