乞丐版
呀)react-peter-window
这个库,而且可以支持自动高宽源码demo地址:https://github.com/JinJieTan/react-keepAlive-dynamic
消息队列
,定期消费,更新界面.`https://github.com/JinJieTan/mini-react/tree/hooks
import { _render } from '../reactDom/index';
import { enqueueSetState } from './setState';
export class Component {
constuctor(props = {}) {
this.state = {};
this.props = props;
}
setState(stateChange) {
const newState = Object.assign(this.state || {}, stateChange);
console.log(newState,'newState')
this.newState = newState;
enqueueSetState(newState, this);
}
}`
`export function enqueueSetState(stateChange, component) {
//第一次进来肯定会先调用defer函数
if (setStateQueue.length === 0) {
//清空队列的办法是异步执行,下面都是同步执行的一些计算
defer(flush);
}
//向队列中添加对象 key:stateChange value:component
setStateQueue.push({
stateChange,
component,
});
//如果渲染队列中没有这个组件 那么添加进去
if (!renderQueue.some((item) => item === component)) {
renderQueue.push(component);
}
}`
`function defer(fn) {
//高优先级任务 异步的 先挂起
return requestAnimationFrame(fn);
}`
❝其实浏览器也是有渲染队列的,例如你在一个for循环里面频繁操作dom,并不会每次操作dom都会导致浏览器渲染,达到一个阀值,就会触发渲染,当然你也可以手动控制清空队列(这里不写太深,有兴趣的可以关注后面的文章) ❞