tiny-react是一个为了简化react源码学习的库,和react17的区别就是少了很多功能,只实现了核心的逻辑,和preact这种react-like库有着根本区别,preact更像是一个和react有着相同的接口但是实现细节却不尽相同的react,而tiny-react是从react官方仓库精简而来,它更像官方react的阉割版,所以每一行代码,每一个函数都能在react最新的官方仓库中找到出处,而且总共的代码只有6千多行,刨除掉ReactDOM只有4000多行,能让React源码学习的难度大大降低
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>
)
}
一、虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=属性值)格式...
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之...
前言 Canvas绘制多变形非常简单,只要懂得Canvas路径 + 简单的初中数学知识即可...
本文没有咬文嚼字的地方,只是一个配色技巧的分享,十分简单,简单到流泪,但或...
折叠式卡片布局在PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发...
1、纯工具操作步骤,懂代码更容易 划线就是不符合国人的审美观念,看着就别扭,...
1.先瞧瞧效果: 2.代码是这样的: img src=images/circle.png alt= id=circle/@m...
背景 在公司参与一个原生APP和h5混合开发的项目,本人在项目中负责h5部分,现将...
作者:Joe Seifi 译者:前端小智 移动: https://mp.weixin.qq.com/s/p5... 有梦...
简介: 6月4日,以“开启分布式云新时代”为主题2021云边协同大会在北京举行,本...