build my React
本文是pomb的build your own React的读书笔记,其中参考了译文 读书笔记按照pomb大神中的步骤来划分, 为即将的React源码的学习做好准备.
Step1 JSX 是如何被解析的 (createElement)
JSX是JavaScript的语法扩展,其本质上是React.createElement的语法糖, 通过babel编译,JSX会转变成React.createElement.
这里我们简单实现一版createElement
function createElement(type, props, ...children) {
return {
// 类型
type,
// config配置
props: {
...props,
// 若是文本节点,单独创建
children: children.map(child =>
typeof child === 'object'
? child
: createTextElement(child))
}
}
}
// 文本节点但是创建
function createTextElement(text) {
return {
type: 'TEXT_ELEMENT',
props: {
nodeValue: text,
children: []
}
}
}
const element = (
<div style="background: salmon">
<h1>Hello World</h1>
<h2 style="text-align:right">from React</h2>
</div>
);
const container = document.getElementById("root");
ReactDOM.render(element, container);
// 这里调用 ReactDOM.render, 会发现已经开始渲染了
Step2 实现自己的render函数,渲染dom节点
// 承接step1
function render(element, container) {
const dom = element.type === 'TEXT_ELEMENT'
? document.createTextNode('')
: document.createElement(element.type)
// 排除children属性
const isProperty = key => key !== 'children'
// 渲染属性
Object.keys(element.props)
.filter(isProperty)
.forEach(name => {
dom[name] = element.props[name]
})
// 递归将子组件都渲染到dom
element.props.children.forEach(child => render(child, dom))
// 将dom挂载在目标容器
container.appendChild(dom)
}
// 接下来我们使用自己的createElement 和render函数来执行渲染
const Didact = {
render,
createElement
}
// 这句注释必须要写
/** @jsx Didact.createElement */
const element = (
<div style="background: salmon">
<h1>Hello World</h1>
<h2 style="text-align:right">from Didact</h2>
</div>
);
const container = document.getElementById("root");
Didact.render(element, container);
Step3 并发模式
截止到Step2 我们已经实现了一个最简易版本的React,但是有个问题,在Step2中的render函数,我们是递归来实现patch到Dom中的,如果元素树层级很深,会长时间占用浏览器进程,造成组件,影响浏览器更高优先级的事务处理,比如L用户的输入交互和ui渲染
一次,我们需要把这个大的任务 切割 为 多个小的 工作单元,这样的话,如果浏览器有更高优先级的事务处理,我们就可以中断react元素的渲染,这里我们引入一个概念,称他为 "并发模式"
我们使用 requestIdleCallback 来用作循环,来执行回调, 我们可以理解requestIdleCallback是一个setTimeout,浏览器会在主线程空闲时运行回调,而不是告诉我们何时去运行.
requestIdleCallback还为我们提供了截止日期参数。我们可以使用它来检查浏览器需要再次控制之前有多少时间。
React 已经不再使用requestIdleCallback,但是现在版本的scheduler包 在概念是是相同的,(这里还等待学习)
// 下一个工作单元
let nextUnitOfWork = null
// workloop
function workloop(deadline) {
// 是否需要暂停
let shouldYield = false
while(nextUnitOfWork && !shouldYield) {
// 不需要暂停
nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
shouldYield = deadline.timeRemaining() < 1
}
requestIdleCallback(workLoop)
}
requestIdleCallback(workLoop)
// 执行下一个单元函数
function performUnitOfWork(nextUnitOfWork) {
// todo
}
Step4 Fiber
比如我们想渲染一个这样的元素树,其fiber结构对应下图fiber结构
Didact.render(
<div>
<h1>
<p />
<a />
</h1>
<h2 />
</div>,
container
)
为了组织工作单元,我们需要一个数据结构, 如上图 是一个fiber树,每个元素都会一个fiber结构,每个fiber都是一个工作单元(unitOfwork)
每一条fiber 只会连接他的第一个子元素作为child, 其他的都会作为第一个子元素的兄弟(sibling)
如果fiber没有child,则将sibling用作下一个工作单元,比如: p元素没有子结点(child),我们会在p完成后,将a元素作为下一个工作单元
如果fiber既没有child也没有sibling,比如a,和h2,会返回到parent,以此类推,知道返回到root
接下来我们重构下render函数,将创建dom的操作提取
// 创建dom, 将step2中render函数的创建dom的逻辑提取
function createDom(fiber) {
const dom = fiber.type === 'TEXT_ELEMENT'
? document.createTextNode('')
: document.createElement(fiber.type)
// 排除children属性
const isProperty = key => key !== 'children'
// 渲染属性
Object.keys(fiber.props)
.filter(isProperty)
.forEach(name => {
dom[name] = fiber.props[name]
})
return dom
}
// 此时的render函数
function render(element, container) {
// 第一个执行单元是根结点
nextUnitOfWork = {
dom: container,
props: {
children: [element]
}
}
}
实现performUnitOfWork函数 performUnitOfWork函数做了三件事:
- 把元素添加到dom中
- 为元素子元素创建一个fiber结构
- 找到下一个工作单元
// 执行下一个单元函数
function performUnitOfWork(fiber) {
// todo add dom node
if (!fiber.dom) {
fiber.dom = createDom(fiber)
}
if (fiber.parent) {
fiber.parent.dom.appendChild(fiber.dom)
}
// todo create new Fibers
const elements = fiber.props.children
let index = 0
// 保存上一个sibling(child是其sibling的sibling.你是你哥的兄弟)
let prevSibling = null
while (index < elements.length) {
const element = elements[index]
const newFiber = {
type: element.type,
props: element.props,
parent: fiber,
dom: null
}
if (index === 0) {
// child
fiber.child = newFiber
} else {
prevSibling.prevSibling = newFiber
}
prevSibling = newFiber
index++
}
// todo return next unit of workunit
if(fiber.child) {
return fiber.child
}
let nextFiber = fiber
while(nextFiber) {
if(nextFiber.sibling) {
return nextFiber.sibling
}
// 直到找到rootFiber
nextFiber = nextFiber.parent
}
}
Step5 render 和commit阶段做了什么
在Step4的performUnitOfWork中, fiber.parent.dom.appendChild(fiber.dom)
每次都会把元素直接添加到dom中,这里会有个问题,就是浏览器随时有可能中断我们的操作,这里会呈给用户一个 不完整的UI. 所以我们需要作出改动, 即: 所有单元执行后. 一并进行所有的dom添加
performUnitOfWork中移除添加dom的操作
- if (fiber.parent) {
- fiber.parent.dom.appendChild(fiber.dom)
- }
创建wipRoot,修改render函数
// 进行中的 根结点(work in progress root)
let wipRoot = null
...
function render(element, container) {
wipRoot = {
dom: container,
props: {
children: [element],
},
}
nextUnitOfWork = wipRoot
}
创建commitRoot函数,修改workloop,当所有单元执行完成后,调用添加所有dom
// root提交
// root提交
function commitRoot() {
// todo add nodes to dom
commitWork(wipRoot.child)
wipRoot = null
}
function commitWork(fiber) {
if(!fiber) {
return
}
const domParent = fiber.parent.dom
domParent.appendChild(fiber.dom)
commitWork(fiber.child)
commitWork(fiber.sibling)
}
function workLoop(deadline) {
// 是否需要暂停
let shouldYield = false
while (nextUnitOfWork && !shouldYield) {
// 执行 一个工作单元并返回下一个工作单元
nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
// 判断空间时间是否足够
shouldYield = deadline.timeRemaining() < 1
}
// 所有工作单元都执行完成后,我们一并进行提交操作
// commitRoot里进行所有元素 往dom 树上添加的动作
if (!nextUnitOfWork && wipRoot) {
commitRoot()
}
requestIdleCallback(workLoop)
}
Step6 Reconciliation 协调阶段
目前为止,我们只完成了添加dom,还需要完成update和delete操作, 我们需要将render函数接收到的元素与提交给DOM的最后一个fiber树进行比较.
因此,在完成提交之后,我们需要保存对“最后一个提交到DOM的fiber树”的引用。我们称之为currentRoot,同时,我们也需要给每一个fiber结构添加alternate属性,该属性的值是旧fiber的引用,即我们在上一个提交阶段提交给dom的fiber
创建currentRoot,添加alternate属性
// 下一个工作单元
let nextUnitOfWork = null
// 进行中的 根结点(work in progress root)
let wipRoot = null
// 当前fiberRoot
+ let currentRoot = null
// workloop
function workloop(deadline) {...}
// render函数添加alternate
// Step2 实现render函数
function render(element, container) {
// 第一个执行单元是根结点
wipRoot = {
dom: container,
props: {
children: [element]
},
+ alternate: currentRoot
}
nextUnitOfWork = wipRoot
}
协调阶段比较规则如下:
- 新旧fiber元素的类型相同,保留DOM节点,更新属性
- 类型不同,且有一个新fiber的元素,执行添加DOM节点
- 类型不同,且有一个旧的fiber元素,则移除旧节点 我们先给不同情况下的节点打上tag,effectTag,我们会在提交阶段使用
function performUnitOfWork(fiber) {
if (!fiber.dom) {
fiber.dom = createDom(fiber)
}
const elements = fiber.props.children
// 协调,比较新旧fiber
reconcileChildren(fiber, elements)
if (fiber.child) {
return fiber.child
}
let nextFiber = fiber
while (nextFiber) {
if (nextFiber.sibling) {
return nextFiber.sibling
}
nextFiber = nextFiber.parent
}
}
// 协调函数
function reconcileChildren(wipFiber, elements) {
let index = 0
// 从alternate中获取旧的child fiber
let oldFiber =
wipFiber.alternate && wipFiber.alternate.child
// 上一个fiber
let prevSibling = null
while (
index < elements.length ||
oldFiber != null
) {
const element = elements[index]
let newFiber = null
const sameType =
oldFiber &&
element &&
element.type == oldFiber.type
// 新旧fiber元素的类型相同,保留DOM节点,更新属性
if (sameType) {
newFiber = {
type: oldFiber.type,
props: element.props,
dom: oldFiber.dom,
parent: wipFiber,
alternate: oldFiber,
effectTag: "UPDATE",
}
}
// 类型不同, 有新元素,添加
if (element && !sameType) {
newFiber = {
type: element.type,
props: element.props,
dom: null,
parent: wipFiber,
alternate: null,
effectTag: "PLACEMENT",
}
}
// 类型不同,有旧元素,删除
if (oldFiber && !sameType) {
oldFiber.effectTag = "DELETION"
deletions.push(oldFiber)
}
// 比较结束,还需比较sibling
if (oldFiber) {
oldFiber = oldFiber.sibling
}
if (index === 0) {
// 第一个节点作为child
wipFiber.child = newFiber
} else if (element) {
// 其余作为sibling
prevSibling.sibling = newFiber
}
prevSibling = newFiber
index++
}
}
在提交阶段,我们根据这些effectTag执行不同处理
// root提交
function commitRoot() {
// 删除收集的节点
deletions.forEach(commitWork)
commitWork(wipRoot.child)
currentRoot = wipRoot
wipRoot = null
}
function commitWork(fiber) {
if (!fiber) {
return
}
const domParent = fiber.parent.dom
if (
fiber.effectTag === "PLACEMENT" &&
fiber.dom != null
) {
domParent.appendChild(fiber.dom)
} else if (
fiber.effectTag === "UPDATE" &&
fiber.dom != null
) {
updateDom(
fiber.dom,
fiber.alternate.props,
fiber.props
)
} else if (fiber.effectTag === "DELETION") {
domParent.removeChild(fiber.dom)
}
commitWork(fiber.child)
commitWork(fiber.sibling)
}
对应的updateDom
// 创建dom, 将step2中render函数的创建dom的逻辑提取
function createDom(fiber) {
const dom =
fiber.type == "TEXT_ELEMENT"
? document.createTextNode("")
: document.createElement(fiber.type)
updateDom(dom, {}, fiber.props)
return dom
}
// 是否是事件
const isEvent = key => key.startsWith("on")
const isProperty = key =>
key !== "children" && !isEvent(key)
const isNew = (prev, next) => key =>
prev[key] !== next[key]
const isGone = (prev, next) => key => !(key in next)
// 更新dom
function updateDom(dom, prevProps, nextProps) {
//Remove old or changed event listeners
Object.keys(prevProps)
.filter(isEvent)
.filter(
key =>
!(key in nextProps) ||
isNew(prevProps, nextProps)(key)
)
.forEach(name => {
const eventType = name
.toLowerCase()
.substring(2)
dom.removeEventListener(
eventType,
prevProps[name]
)
})
// Remove old properties
Object.keys(prevProps)
.filter(isProperty)
.filter(isGone(prevProps, nextProps))
.forEach(name => {
dom[name] = ""
})
// Set new or changed properties
Object.keys(nextProps)
.filter(isProperty)
.filter(isNew(prevProps, nextProps))
.forEach(name => {
dom[name] = nextProps[name]
})
// Add event listeners
Object.keys(nextProps)
.filter(isEvent)
.filter(isNew(prevProps, nextProps))
.forEach(name => {
const eventType = name
.toLowerCase()
.substring(2)
dom.addEventListener(
eventType,
nextProps[name]
)
})
}
截止到此,可以查看pomb的代码codesandbox
函数组件
function App(props) {
return <h1>Hi {props.name}</h1>
}
const element = <App name="foo" />
const container = document.getElementById("root")
Didact.render(element, container)
函数组件和普通的element有和不同?
- 来自函数组件App的fiber没有dom节点(不存在App dom节点)
- 函数组件的children属性不在props中而是其返回值 我们根据fiber的type属性是否是funciton,来分别执行更新函数
// 执行下一个单元函数
function performUnitOfWork(fiber) {
const isFunctionComponent = fiber.type instanceof Function
if (isFunctionComponent) {
updateFunctionComponent(fiber)
} else {
updateHostComponent(fiber)
}
if (fiber.child) {
return fiber.child
}
let nextFiber = fiber
while (nextFiber) {
if (nextFiber.sibling) {
return nextFiber.sibling
}
nextFiber = nextFiber.parent
}
}
function updateHostComponent(fiber) {
if (!fiber.dom) {
fiber.dom = createDom(fiber)
}
const elements = fiber.props.children
reconcileChildren(fiber, elements)
}
function updateFunctionComponent(fiber) {
// 函数组件的fiber 的type是个函数,执行可以到得其返回值,也就是children
const children = [fiber.type(fiber.props)]
reconcileChildren(fiber, children)
}
在提交阶段,我们也需要作出改变
function commitWork(fiber) {
if (!fiber) {
return
}
// 若是函数组件 是没dom的,需要往上寻找dom
+ let domParentFiber = fiber.parent
+ while (!domParentFiber.dom) {
+ domParentFiber = domParentFiber.parent
+ }
+ const domParent = domParentFiber.dom
if (
fiber.effectTag === "PLACEMENT" &&
fiber.dom != null
) {
domParent.appendChild(fiber.dom)
} else if (
fiber.effectTag === "UPDATE" &&
fiber.dom != null
) {
updateDom(
fiber.dom,
fiber.alternate.props,
fiber.props
)
} else if (fiber.effectTag === "DELETION") {
+ commitDeletion(fiber, domParent)
}
commitWork(fiber.child)
commitWork(fiber.sibling)
}
function commitDeletion(fiber, domParent) {
if (fiber.dom) {
domParent.removeChild(fiber.dom)
} else {
// 类似 const App =() =>{}的函数组件,App没有dom的,需要找到其返回值(child),执行删除
commitDeletion(fiber.child, domParent)
}
}
Step8 Hooks
实现一版简易的useState 首先做一些初始化操作
// 函数组件正在执行的fiber
let wipFiber = null
// hooks索引
let hookIndex = null
function updateFunctionComponent(fiber) {
// 当是函数组件时,存储fiber
wipFiber = fiber
hookIndex = 0
// 添加hooks数组,以便函数组件多次调用hook,追踪hook索引
wipFiber.hooks = []
// 函数组件的fiber 的type是个函数,执行可以到得其返回值,也就是children
const children = [fiber.type(fiber.props)]
reconcileChildren(fiber, children)
}
实现useState
function useState(initial) {
// 1.当函数组件调用useState时,我们检查是否有旧的钩子,使用hook索引
// 在alternate中检查,存在旧的hook,从旧的hook中copy state到新的hook
// 否则 初始化state
const oldHook =
wipFiber.alternate &&
wipFiber.alternate.hooks &&
wipFiber.alternate.hooks[hookIndex]
const hook = {
state: oldHook ? oldHook.state : initial,
// 更新函数队列 setState
queue: []
}
const actions = oldHook ? oldHook.queue : []
actions.forEach(action => {
hook.state = action(hook.state)
})
// 2. 定义setState, 接收一个action
const setState = action => {
hook.queue.push(action)
// 设置一个新的wipRoot,并且作为下一个执行单元,这样可以开启一个新的渲染阶段
wipRoot = {
dom: currentRoot.dom,
props: currentRoot.props,
alternate: currentRoot
}
nextUnitOfWork = wipRoot
deletions = []
}
// 2. 将新的hook添加到fiber,hook索引++, 返回state
wipFiber.hooks.push(hook)
hookIndex++
return [hook.state, setState]
}
总结
只是简易版本的react,熟悉原理使用,要想做到真正的懂react,还需要去阅读学习源码,这是前端绕不开的,所以,加油吧,打工人!
本文涉及的源码 build your own React