实现 useState

src/index.js

注意：我们这里写的暂时会有数组塌陷的情况。
其实因为在原版代码里，每一个组件里都有自己的index和数组。
在原版代理里，它是把这个放在了 fiber 里。
React有一个特点，每次 setState 更新都需要从根节点开始进行一次比较，不会按需更新，这也是React 耗时长，性能差的原因，正因为次，React 搞出了 fiber，fiber 的核心就是要 diff 工作可以暂停。

sdre.gif

  1. import React, { Component } from './react';
  2. import ReactDOM from './react-dom';
  4. // setState参数为 值
  5. function Counter1(){
  6.   let [number, setNumber] = React.useState(5);
  7.   return (
  8.     <div>
  9.       <p>Counter1：{number}</p>
  10.       <button onClick={() => setNumber(number+1)}>Counter1：+</button>
  11.     </div>
  12.   )
  13. }
  14. // setState参数为 函数
  15. function Counter2(){
  16.   let [number, setNumber] = React.useState(10);
  17.   return (
  18.     <div>
  19.       <p>Counter2：{number}</p>
  20.       <button onClick={() => setNumber(n => n+1)}>Counter2：+</button>
  21.     </div>
  22.   )
  23. }
  24. function Counter3(){
  25.   let [number, setNumber] = React.useState(15);
  26.   return (
  27.     <div>
  28.       <p>Counter3：{number}</p>
  29.       <button onClick={() => setNumber(number+1)}>Counter3：+</button>
  30.     </div>
  31.   )
  32. }
  34. function App(){
  35.   let [number, setNumber] = React.useState(0);
  37.   return (
  38.     <div>
  39.       <Counter1 />
  40.       {number%2 === 0 && <Counter2 />}
  41.       <Counter3 />
  42.       <button onClick={() => setNumber(number+1)}>App：+</button>
  43.     </div>
  44.   )
  45. }
  47. ReactDOM.render(<App />, document.getElementById('root'));

src/react.js
  1. import { useState } from './react-dom';
  2. export { useState };
  4. const React = {
  5.   useState,
  6. }
  7. export default React;

src/react-dom.js
  1. + let hookStates = [];  // 这是一个数组，里面存放着我们所有的 hook 状态
  2. + let hookIndex = 0;    // 当前 hook 的索引
  3. + let scheduleUpdate;    // hook调度更新函数
  5. // 给根容器挂载的时候
  6. function render (vdom, container){
  7.   mount(vdom, container);
  8. +  scheduleUpdate = () => {
  9. +    hookIndex = 0;  //在状态修改后调试更新的时候，把 hooks 的索引重置
  10. +    compareTwoVdom(container, vdom, vdom);  //虚拟DOM比较更新
  11. +  }
  12. }
  13. // 挂载
  14. function mount (vdom, container){
  15.   if (!vdom) return;
  16.   const dom = createDOM(vdom, container);
  17.   if (dom) container.appendChild(dom);
  18.   dom.componentDidMount && dom.componentDidMount();
  19. }
  21. /** 让函数组件可以使用状态
  22.  * 
  23.  * @param {*} initialState 初始状态
  24.  */
  25. export function useState(initialState){
  26.   //把老的值取出来，如果没有，就使用默认值
  27.   hookStates[hookIndex] = hookStates[hookIndex] || 
  28.     (typeof initialState === 'function' ? initialState() : initialState);
  30.   // 因为 hookIndex 一直在变，
  31.   // 给每一个 useState 的 hook 定死一个不变的索引。用于 setState时 更新该hook的数据
  32.   let currentIndex = hookIndex;
  33.   function setState(newState){
  34.     if(typeof newState === 'function') newState = newState(hookStates[currentIndex]);
  35.     hookStates[currentIndex] = newState;
  36.     scheduleUpdate();  //当状态改变后要重新更新应用
  37.   }
  39.   return [hookStates[hookIndex++], setState]; //注意，先取值，再++，把 hook 索引指向下一个 useState。
  40. }

实现 useMemo、useCallback

demo：https://www.yuque.com/zhuchaoyang/cx9erp/og7367#jncy9

src/react.js
  1. import { useState, useCallback, useMemo } from './react-dom';
  2. export { useState, useCallback, useMemo };
  4. const React = {
  5.   useCallback,
  6.   useMemo,
  7. }
  8. export default React;

src/react-dom.js
  1. /** 缓存 对象
  2.  * 
  3.  * @param {*} factory 工厂方法，该方法返回要缓存的对象
  4.  * @param {*} deps 依赖数组
  5.  * @returns 
  6.  */
  7. export function useMemo(factory, deps){
  8.   if (hookStates[hookIndex]){
  9.     let [lastMemo, lastDeps] = hookStates[hookIndex];
  10.     let same = deps.every((item, index) => item === lastDeps[index]);
  12.     if (same){
  13.       hookIndex ++;
  14.       return lastMemo;
  15.     } else {
  16.       let newMemo = factory();
  17.       hookStates[hookIndex++] = [newMemo, deps];
  18.       return newMemo;
  19.     }
  20.   } else {
  21.     let newMemo = factory();
  22.     hookStates[hookIndex++] = [newMemo, deps];
  23.     return newMemo;
  24.   }
  25. }
  27. /** 缓存 函数
  28.  * 
  29.  * @param {*} callback 要缓存的函数
  30.  * @param {*} deps 依赖数组
  31.  * @returns 
  32.  */
  33. export function useCallback(callback, deps){
  34.   if (hookStates[hookIndex]){
  35.     let [lastCallback, lastDeps] = hookStates[hookIndex];
  36.     let same = deps.every((item, index) => item === lastDeps[index]);
  38.     if (same){
  39.       hookIndex ++;
  40.       return lastCallback;
  41.     } else {
  42.       hookStates[hookIndex++] = [callback, deps];
  43.       return callback;
  44.     }
  45.   } else {
  46.     hookStates[hookIndex++] = [callback, deps];
  47.     return callback;
  48.   }
  49. }

实现 useReducer

demo：https://www.yuque.com/zhuchaoyang/cx9erp/og7367#YzW9B

src/react.js
  1. import { useReducer } from './react-dom';
  2. export { useReducer };
  4. const React = {
  5.   useReducer,
  6. }
  7. export default React;

src/react-dom.js
  1. /** 让函数组件可以使用状态，useState 可以算作 useReducer 的一个语法糖
  2.  * 
  3.  * @param {*} initialState 初始状态
  4.  */
  5. export function useState(initialState){
  6.   return useReducer(null, initialState);
  7. }
  8. export function useReducer(reducer, initialState){
  9.   //把老的值取出来，如果没有，就使用默认值
  10.   let lastState = hookStates[hookIndex] = hookStates[hookIndex] || 
  11.     (typeof initialState === 'function' ? initialState() : initialState);
  13.   //因为 hookIndex 一直在变，
  14.   //给每一个 useState 的 hook 定死一个不变的索引。用于调用 setState(dispatch) 函数时 更新该hook的数据
  15.   let currentIndex = hookIndex;
  17.   function dispatch(action){
  18.     let nextState;
  20.     if (reducer){
  21.       nextState = reducer(lastState, action);
  22.     } else {
  23.       if (typeof action === 'function') action = action(lastState);
  24.       nextState = action;
  25.     }
  27.     hookStates[currentIndex] = nextState;
  28.     scheduleUpdate();  //当状态改变后要重新更新应用
  29.   }
  31.   //注意，先取值，再++，把 hook 索引指向下一个 useState。
  32.   return [hookStates[hookIndex++], dispatch];
  33. }

实现 useContext

demo：https://www.yuque.com/zhuchaoyang/cx9erp/og7367#tCIIp

src/react.js
  1. export function useContext(context){
  2.   return context._currentValue;
  3. }
  5. const React = {
  6.   useContext,
  7. }
  9. export default React;

实现 useEffect

demo: https://www.yuque.com/zhuchaoyang/cx9erp/og7367#C082E

src/react.js
  1. import { useEffect } from './react-dom';
  2. export { useEffect };
  4. const React = {
  5.   useEffect,
  6. }
  7. export default React;

src/react-dom.js
  1. export function compareTwoVdom(container, oldVdom, newVdom, nextDOM){
  2.   // 老的有，新的没有 => 要刪除此节点
  3.   if (oldVdom && !newVdom){
  4. +    if (hookStates[hookIndex]){
  5. +      let [destroyFunction] = hookStates[hookIndex];
  6. +      destroyFunction && destroyFunction();
  7. +    }
  8.   }
  10.   // 新旧都有虚拟DOM，但是类型type不相同  => 直接替换节点
  11.   if (oldVdom && newVdom && oldVdom.type !== newVdom.type){
  12. +    if (hookStates[hookIndex]){
  13. +      let [destroyFunction] = hookStates[hookIndex];
  14. +      destroyFunction && destroyFunction();
  15. +    }
  16.   }
  17. }
  19. /** useEffect
  20.  * 
  21.  * 为了保证次回调函数不是同步执行，而是在页面渲染后执行，可以把它包装成宏任务
  22.  * @param {*} callback 回调函数
  23.  * @param {*} deps 依赖数组
  24.  */
  25. export function useEffect(callback, deps){
  26.   if (hookStates[hookIndex]){
  27.     let [destroyFunction, lastDeps] = hookStates[hookIndex];
  28.     let same = deps && deps.every((item, index) => item === lastDeps[index]);
  30.     if (same){
  31.       hookIndex ++;
  32.     } else {
  33.       destroyFunction && destroyFunction();
  34.       setTimeout(() => {
  35.         let destroyFunction = callback();
  36.         hookStates[hookIndex++] = [destroyFunction, deps];
  37.       })
  38.     }
  39.   } else {
  40.     // 用 setTimeout 封装成宏任务
  41.     setTimeout(() => {
  42.       let destroyFunction = callback(); //执行后，返回销毁函数
  43.       hookStates[hookIndex++] = [destroyFunction, deps];
  44.     })
  45.   }
  46. }

实现 useLayoutEffect、useRef

demo: https://www.yuque.com/zhuchaoyang/cx9erp/og7367#mB9bU

src/react.js
  1. import { useLayoutEffect, useRef } from './react-dom';
  2. export { useLayoutEffect, useRef };
  4. const React = {
  5.   useLayoutEffect,
  6.   useRef,
  7. }
  8. export default React;

src/react-dom.js
  1. /** useLayoutEffect
  2.  * 
  3.  * 为了保证次回调函数不是同步执行，而是在页面渲染之前执行，可以把它包装成微任务
  4.  * @param {*} callback 回调函数
  5.  * @param {*} deps 依赖数组
  6.  */
  7. export function useLayoutEffect(callback, deps){
  8.   if (hookStates[hookIndex]){
  9.     let [destroyFunction, lastDeps] = hookStates[hookIndex];
  10.     let same = deps && deps.every((item, index) => item === lastDeps[index]);
  12.     if (same){
  13.       hookIndex ++;
  14.     } else {
  15.       destroyFunction && destroyFunction();
  16.       queueMicrotask(() =>{
  17.         let destroyFunction = callback();
  18.         hookStates[hookIndex++] = [destroyFunction, deps];
  19.       })
  20.     }
  21.   } else {
  22.     // 用 queueMicrotask 封装成微任务
  23.     queueMicrotask(() => {
  24.       let destroyFunction = callback(); //执行后，返回销毁函数
  25.       hookStates[hookIndex++] = [destroyFunction, deps];
  26.     })
  27.   }
  28. }
  30. export function useRef(initialState){
  31.   hookStates[hookIndex] = hookStates[hookIndex] || {current: initialState};
  32.   return hookStates[hookIndex++];
  33. }

实现 forwardRef、useImperativeHandle

demo: https://www.yuque.com/zhuchaoyang/cx9erp/og7367/edit#e38BC

src/react.js
  1. import { forwardRef, useImperativeHandle } from './react-dom';
  2. export { forwardRef, useImperativeHandle };
  4. export function forwardRef(FunctionComponent){
  5.   return class Hoc extends Component {
  6.     render (){
  7.       if (FunctionComponent.length < 2){
  8.         console.error('Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?');
  9.       }
  10.       return FunctionComponent(this.props, this.ref);
  11.     }
  12.   }
  13. }
  15. export function useImperativeHandle(ref, handler){
  16.   ref.current = handler();
  17. }
  19. const React = {
  20.   forwardRef,
  21.   useImperativeHandle,
  22. }
  23. export default React;