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

复制代码