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 的出現上面的問題都會迎刃而解。引入 《用 React 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  函數。

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);
}

複製代碼