简单实现react中虚拟DOM渲染
/**
* @method createElement
* @param type {string}
* @param props {Object}
* @param children {string}
*/
let createElement = (type, props, ...children) => {
props = props || {};
let obj = {
type: null,
props: {
children: children.length <= 1 ? (children[0] || '') : children
},
key: null,
ref: null,
};
obj = {...obj, type, props: {...props, children}};
// eslint-disable-next-line no-unused-expressions
'key' in obj.props ? (obj.key = obj.props.key, obj.props.key = undefined) : null;
// eslint-disable-next-line no-unused-expressions
'ref' in obj.props ? (obj.ref = obj.props.ref, obj.props.ref = undefined) : null;
return obj;
};
/**
* @method render
* @param obj {Object}
* @param container {elementNode}
* @param callback {function}
*/
let render = (obj, container, callback) => {
let {type, props} = obj || {},
newElement = document.createElement(type);
for (const attr in props) {
if (!props.hasOwnProperty(attr)) break; // 不是私有的直接结束遍历
if (!props[attr]) continue; // 如果当前属性没有值,直接不处理即可
let value = props[attr];
// className
if (attr === 'className') {
newElement.setAttribute('class', value);
continue
}
// style
if (attr === 'style') {
// 如果style为空支付串,不处理
if (value === '') continue;
for (const styleKey in value) {
if (value.hasOwnProperty(styleKey)) {
newElement['style'][styleKey] = value[styleKey];
}
}
continue
}
// children
if (attr === 'children') {
// 先将其转换为数组,后期直接操作数组即可
// eslint-disable-next-line no-unused-expressions
!(value instanceof Array) ? value = [value] : null;
value.forEach((item, index) => {
if (typeof item === "string") {
let text = document.createTextNode(item);
newElement.appendChild(text)
} else {
render(item, newElement);
}
});
continue
}
newElement.setAttribute(attr, value); // 基于setAttribute设置的属性,可以变现在HTML的结构上
}
container.appendChild(newElement);
callback && callback();
};
let elementNode = createElement(
'div',
{id: 'container', ref: 'main', key: new Date()},
createElement(
'hr'
),
createElement(
'div',
{id: 'header'},
'头部'
),
createElement(
'hr'
),
createElement(
'div',
{id: 'main'},
'主体内容'
),
createElement(
'hr'
),
createElement(
'div',
{id: 'footer'},
'脚注'
),
);
// eslint-disable-next-line no-undef
render(elementNode, root, _ => console.log('ok'))
简单实现react中虚拟DOM渲染的更多相关文章
- react中虚拟dom的diff算法
.state 数据 .jsx模板 .生成虚拟dom(虚拟DOM就是一个js对象,用它来描述真实DOM) ['div', {id:'abc'}, ['span', {}, 'hello world']] ...
- 聊一聊React中虚拟DOM
1. 什么是虚拟 DOM 在 React 中实际上是 render 函数中return 的内容会生成 DOM,return 中的内容由两部分组成,一部分是 JSX ,另一部分就是 state 中的数据 ...
- react中虚拟DOM的基本概念
react中的核心概念 1.DOM的本质是什么: 浏览器中的概念,用js对象来表示页面上的元素,并提供操作DOM对象的API 2.什么事react中的虚拟DOM:是框架中的概念,是程序员用js对象来模 ...
- react中虚拟DOM
简单来说虚拟DOM就是一个js对象,相对于真实dom来做比较更节约性能,虚拟DOM执行过程如下
- 【React自制全家桶】二、分析React的虚拟DOM和Diff算法
一.React如何更新DOM内容: 1. 获取state 数据 2. 获取JSX模版 3. 通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...
- React的虚拟DOM
ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...
- vue2.0的虚拟DOM渲染
1.为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架(文章链接),其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更 ...
- 【译】在React中实现条件渲染的7种方法
原文地址:https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications 借助R ...
- React virtual DOM explained in simple English/简单语言解释React的虚拟DOM
初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...
随机推荐
- IPC五种通讯方式
IPC五种通讯方式 1.管道:速度慢,容量有限,只有父子进程能通讯 2.FIFO:任何进程间都能通讯,但速度慢 3.消息队列:容量受到系统限制,且要注意第一次读的时候,要考虑上一次没有读完数据的问题 ...
- python 杂记 网络
参考资料:https://www.cnblogs.com/gareth-yu/p/9097943.htmlimport selectors import socket sel = selectors. ...
- 甘特图控件如何自定义绘图?DevExpress Winforms帮你忙
DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.无论是Office风格的界面,还是分析处理大批量的业务数据,DevExpr ...
- postgresql backup
#!/bin/sh # Database backup script # Backup use postgres pg_dump command: # pg_dump -U <user> ...
- 基于 C++ 的脚本语言 cpps 脚本
cpps 脚本是一个基于 C++ 的脚本语言. 基础语法: if&else 接口说明 根据括号中数据判断执行相关代码. 代码演示 var i = toint(io.getc()); if(i ...
- Domain Socket本地进程间通信
socket API原本是为网络通讯设计的,但后来在socket的框架上发展出一种IPC机制,就是UNIX Domain Socket.虽然网络socket也可用于同一台主机的进程间通讯(通过loop ...
- Jumbled String (Kattis - jumbledstring)(思维题)
Problem Recall that a subsequence of a string is any string obtained by removing some subset of char ...
- Eclipse的快捷键设置及使用
Eclipse快捷键的设置和使用 java程序开发,经常会用Eclipse或者MyEclise集成开发环境,一些实用的Eclipse快捷键和使用技巧, 可以在平常开发中节约出很多时间提高工作效率,下面 ...
- java生成zip包兼容Linux
/* 这个方法只用在windows中用服务器为Linux就不行 */ package common.util; import java.io.File;import java.io.FileInput ...
- AcWing:241. 楼兰图腾(树状数组逆序对)
在完成了分配任务之后,西部314来到了楼兰古城的西部. 相传很久以前这片土地上(比楼兰古城还早)生活着两个部落,一个部落崇拜尖刀(‘V’),一个部落崇拜铁锹(‘∧’),他们分别用V和∧的形状来代表各自 ...