手写简易React-Fiber
1、首先创建createElement函数
1 function createElement (
2 type,
3 config,
4 ...children
5 ) {
6
7 const props = {
8 ...config,
9 children: children.map(child => typeof child === 'object' ? child : createTextNode(child))
10 }
11
12 return {
13 type,
14 props
15 }
16 }
17
18 function createTextNode (text) {
19
20 return {
21 type: 'TEXT',
22 props:{
23 children:[],
24 nodeValue: text
25 }
26 }
27 }
2、然后创建react-dom,即render函数
1 function render(vnode, container) {
2 //vnode -> node
3 const node = createNode(vnode)
4 //node 插入container
5 console.log(node);
6 node && container && container.appendChild(node)
7 }
8
9 function createNode (vnode) {
10 const {
11 type,
12 props
13 } = vnode
14 let node;
15
16 //根据节点类型生成dom节点
17 if(type === 'TEXT'){
18 //文本
19 node = document.createTextNode('')
20 } else if(typeof type === 'string') {
21 node = document.createElement(type)
22 }
23 //遍历children
24
25 reconcileChildren(node, props ? props.children : [])
26
27 //更新属性
28 updateNode(node, props)
29 return node
30
31 }
32
33 function updateNode(node, nextVal) {
34 if(nextVal){
35 Reflect.ownKeys(nextVal).filter(ck => ck !== 'children').forEach(k => {
36 node[k] = nextVal[k]
37 })
38 }
39 }
40
41 function reconcileChildren(node, children) {
42 children.forEach(child => {
43 render(child,node)
44 })
45 }
3、Fiber实现:
function render(vnode, container) {
//vnode -> node
// const node = createNode(vnode)
//node 插入container
// console.log(node);
// node && container && container.appendChild(node)
// workLoop
wipRoot = {
stateNode: container,
props:{
children:[vnode]
}
}
nextUnitOfWork = wipRoot
} function createNode (vnode) {
const {
type,
props
} = vnode
let node; //根据节点类型生成dom节点
if(type === 'TEXT'){
//文本
node = document.createTextNode('')
} else if(typeof type === 'string') {
node = document.createElement(type)
}
//遍历children reconcileChildren(node, props ? props.children : []) //更新属性
updateNode(node, props)
return node } function updateNode(node, nextVal) {
if(nextVal){
Reflect.ownKeys(nextVal).filter(ck => ck !== 'children').forEach(k => {
node[k] = nextVal[k]
})
}
} // function reconcileChildren(node, children) {
// children.forEach(child => {
// render(child,node)
// })
// }
/* fiber */
//next work fiber
let nextUnitOfWork = null
// work in progress 正在工作红的fiber root
let wipRoot = null function reconcileChildren(workInProgress,children){
let prevNewFiber = null
children.forEach((child,i) => {
//FiberNode 节点
let newFiber = {
type: child.type,
key: child.key,
props:child.props,
stateNode: null,
child: null,
sibling: null,
return:workInProgress
} if(i === 0){
workInProgress.child = newFiber
} else {
prevNewFiber.sibling = newFiber
} prevNewFiber = newFiber
})
} function updateHostComponent(workInProgress){
if(!workInProgress.stateNode){
workInProgress.stateNode = createNode(workInProgress)
} reconcileChildren(workInProgress,workInProgress.props.children)
} function performUnitOfWork(workInProgress) {
//1 处理当前fiber
//原生标签
updateHostComponent(workInProgress) //2 返回下一个要处理的fiber
if(workInProgress.child){
return workInProgress.child
} let next = workInProgress while(next){
if(next.sibling){
return next.sibling
}
next = next.return
}
} //更新Fiber
function workLoop (idleDeadline) {
console.log(idleDeadline);
while(nextUnitOfWork && idleDeadline.timeRemaining() > 1) {
//处理当前fiber 并返回下个fiber
nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
}
//comnitRoot
if(!nextUnitOfWork && wipRoot){
//vnode - node 更新到container中
commitRoot()
}
} requestIdleCallback(workLoop,{ timeout: 2000 }) function commitRoot() {
commitWorker(wipRoot.child)
wipRoot = null
} function commitWorker(workInProgress){
if(!workInProgress){
return
}
//提交workInProgress
let parentNodeFiber = workInProgress.return
let parentNode = parentNodeFiber.stateNode
if(workInProgress.stateNode){
parentNode.appendChild(workInProgress.stateNode)
}
//提交 workInProgress.child
commitWorker(workInProgress.child)
//提交 workInProgress.sibling
commitWorker(workInProgress.sibling)
}
// export default { render }
4、最后演示
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>手写React</title>
6 <script src="main.js" type="text/javascript" charset="utf-8"></script>
7 <script src="treact-dom.js" type="text/javascript" charset="utf-8"></script>
8 </head>
9 <body>
10 <div id="root"></div>
11 <script type="text/javascript">
12 let rot = createElement(
13 "div",
14 null,
15 createElement(
16 "h1",
17 null,
18 "慢 慢 慢"
19 ),
20 createElement(
21 "p",
22 null,
23 "Terry"
24 ),
25 createElement(
26 "a",
27 { href: "https://www.kaikeba.com/" },
28 "Terry"
29 ),
30 "哈哈哈哈"
31 )
32 render(rot, document.getElementById("root"))
33 </script>
34 </body>
35 </html>
5、结果
手写简易React-Fiber的更多相关文章
- JDK动态代理深入理解分析并手写简易JDK动态代理(下)
原文同步发表至个人博客[夜月归途] 原文链接:http://www.guitu18.com/se/java/2019-01-05/27.html 作者:夜月归途 出处:http://www.guitu ...
- JDK动态代理深入理解分析并手写简易JDK动态代理(上)
原文同步发表至个人博客[夜月归途] 原文链接:http://www.guitu18.com/se/java/2019-01-03/27.html 作者:夜月归途 出处:http://www.guitu ...
- 【教程】手写简易web服务器
package com.littlepage.testjdbc; import java.io.BufferedReader; import java.io.FileReader; import ja ...
- 手写简易SpringMVC
手写简易SpringMVC 手写系列框架代码基于普通Maven构建,因此在手写SpringMVC的过程中,需要手动的集成Tomcat容器 必备知识: Servlet相关理解和使用,Maven,Java ...
- 手写简易的Mybatis
手写简易的Mybatis 此篇文章用来记录今天花个五个小时写出来的简易版mybatis,主要实现了基于注解方式的增删查改,目前支持List,Object类型的查找,参数都是基于Map集合的,可以先看一 ...
- Java多线程之Executor框架和手写简易的线程池
目录 Java多线程之一线程及其基本使用 Java多线程之二(Synchronized) Java多线程之三volatile与等待通知机制示例 线程池 什么是线程池 线程池一种线程使用模式,线程池会维 ...
- 手写简易WEB服务器
今天我们来写一个类似于Tomcat的简易服务器.可供大家深入理解一下tomcat的工作原理,本文仅供新手参考,请各位大神指正!首先我们要准备的知识是: Socket编程 HTML HTTP协议 服务器 ...
- 手写简易版RPC框架基于Socket
什么是RPC框架? RPC就是远程调用过程,实现各个服务间的通信,像调用本地服务一样. RPC有什么优点? - 提高服务的拓展性,解耦.- 开发人员可以针对模块开发,互不影响.- 提升系统的可维护性及 ...
- JavaScript之Promise实现原理(手写简易版本 MPromise)
手写 Promise 实现 Promise的基本使用 Promise定义及用法详情文档:Promise MAD文档 function testPromise(param) { return new P ...
随机推荐
- 使用docker搭建redis服务器记录
#mkdir /home/redishome#mkdir /home/redishome/data#chmod -R 777 /home/redishome把redis.conf传到/home/red ...
- markdown的基本使用
1.什么是markdown? markdown是一种轻量级的标记语言 可以转换为html/xhtml和其它格式 可读.直观.学习成本低 当你学会使用markdown编写文档时,你会感觉自己发现了一个新 ...
- 【水】怎么在 HZOI 上水到更高的分
前言 这些东西在联赛并用不了 预编译优化 40行优化 #define _CRT_SECURE_NO_WARNINGS #pragma GCC optimize(2) #pragma GCC optim ...
- python+selenium 爬取中国工业园网
import math import re import requests from lxml import etree type = "https://www.cnrepark.com/g ...
- property和setter装饰器
# property装饰器 # 作用: 将一个get方法转换为对象的属性. 就是 调用方法改为调用对象 # 使用条件: 必须和属性名一样 # setter方法的装饰器: # 作用:将一个set方法转换 ...
- flutter_bloc使用解析---骚年,你还在手搭bloc吗!
前言 首先,有很多的文章在说flutter bloc模式的应用,但是百分之八九十的文章都是在说,使用StreamController+StreamBuilder搭建bloc,提升性能的会加上Inher ...
- Python入门基础教程-准备工作
作为一名Python的忠实爱好者,在Python的学习过程中趟过了很多坑.不论是在基础语法.爬虫.可视化的学习,亦或是在数据挖掘的项目开展中,整个过程有痛苦也有收获,有捶胸顿足也有仰天长笑.所以在以后 ...
- pytest-pyppeteer:在pytest中运行pyppeteer
pytest-pyppeteer pytest-pyppeteer是我写的一个 pytest 插件,支持在 pytest 中运行pyppeteer,起因是为了解决工作中的一个测试需求,现在将其开源并做 ...
- 基于Spring读写分离
为什么是基于Spring的呢,因为实现方案基于Spring的事务以及AbstractRoutingDataSource(spring中的一个基础类,可以在其中放多个数据源,然后根据一些规则来确定当前需 ...
- 手撸ORM浅谈ORM框架之Update篇
快速传送 手撸ORM浅谈ORM框架之基础篇 手撸ORM浅谈ORM框架之Add篇 手撸ORM浅谈ORM框架之Update篇 手撸ORM浅谈ORM框架之Delete篇 手撸ORM浅谈ORM框架之Query ...