react hooks實現原理解析

2022-10-12 14:00:30

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原理內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

react hooks實現原理解析

目錄