从0手写React（未完待续）

The createElement Function

jsx => js by createElement

The render Function

• 创建元素

• 赋予属性

  • 获取所有的 key

  • 过滤掉 children

  • 把 element 的 props 里面的属性赋值给 dom

• 递归渲染所有的子元素

  • 子元素的父元素是 dom

• 添加到父节点

Concurrent Mode

• 把一个大任务变成很多小任务

• window.requestIdleCallback()

  • 浏览器空闲的时候会调用其回调函数

  • 第一次渲染和每一次渲染都要调用 requestIdleCallback

• 全局变量 nextUnitOfWork

• 调度函数 workLoop(deadline)

  • 变量 shouldYield 默认为 false

  • 判断有事情做且不应该停止的时候

    • 做完一个任务并且返回下一个单元

    • 判断时间够不够

  • 没有足够的时间，请求浏览器下一次空闲的时候调用 workLoop

• 第一次请求，调用 workLoop

Fibers

• fiber

  • 工作单元：对象

  • dom, child, sibling, parent(return)

• fiber tree

  

• do three things for each fiber

  • add the element to the DOM

  • create the fibers for th element`s children

  • select the next unit of work

Render and Commit Phases

Reconciliation

Function Components

Hooks

从0手写React｜React核心原理｜理解源码｜Episode02｜页面渲染｜实现ReactDOM.render()_哔哩哔哩_bilibili