tiny-react 一个基于 React17 精简而来的仓库

tiny-react 是一个为了简化 react 源码学习的库，和 react17 的区别就是少了很多性能，只实现了外围的逻辑，和 preact 这种 react-like 库有着基本区别,preact 更像是一个和 react 有着雷同的接口然而实现细节却不尽相同的 react, 而 tiny-react 是从 react 官网仓库精简而来，它更像官网 react 的阉割版，所以每一行代码，每一个函数都能在 react 最新的官网仓库中找到出处，而且总共的代码只有 6 千多行，刨除掉 ReactDOM 只有 4000 多行，能让 React 源码学习的难度大大降低

使用指南

• 在浏览源码前，你须要对 react 的大体原理有肯定的理解在这里强烈推荐去通读一下卡颂老师的 React 技术揭秘
• 对 react 的大体原理有肯定理解后就能够开始看源码了，不过有些同学可能对一些源码中应用频繁的的数据结构和算法还不怎么理解，这时候就可以看一下上面的看源码前须要理解的数据结构和算法, 如果你曾经十分理解这些常识则能够跳过
• react-dom 这个模块，能够不必太关注，尽管他的代码有 2000 多行，然而大量的代码都是 dom 操作和事件委托相干函数，对学习 React 外围原理影响不大，不过其中 浏览器事件优先级 相干的代码还是要留神一下
• react-reconciler 这个模块须要重点关注特地是其中的 ReactFiberWorkLoop 他是 React 源码的骨干，把所有的模块连贯到了一起
• scheduler 这个模块是代码起码，最简略的模块了，而且根本没有和其余模块耦合，能够间接独自看他的源码

看源码前须要理解的数据结构和算法

• 位运算

• 优先队列

• 循环链表

• dfs

Feature

工夫切片

useState 和 useEffect

useLayoutEffect

优先级调度

import React, {useState, useEffect} from '../packages/react'

export const PriorityScheduling = () => {const [count, updateCount] = useState(0)

  const onClick = () => {updateCount((count) => count + 2)
  }

  console.log({count})

  useEffect(() => {
    // 临时不反对 ref 间接用选择器获取
    const button = document.getElementById('discretEventDispatcher')!
    setTimeout(() => updateCount(1), 1000)
    setTimeout(() => {button.click()
      // 依据机能给第二个 setTimeout 一个适合的工夫, 或者适当的加长数组的长度
      // 以保障点击事件触发时，前一个低优先级的更新的 render 阶段还没有实现
      // 能力看到插队状况产生
    }, 1030)
  }, [])

  return (
    <div>
      <button id="discretEventDispatcher" onClick={onClick}>
        减少 2
      </button>
      <div>
        {Array.from(new Array(10000)).map((v, index) => (<span key={index}>{count}</span>
        ))}
      </div>
    </div>
  )
}