/**
* @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渲染的更多相关文章

  1. react中虚拟dom的diff算法

    .state 数据 .jsx模板 .生成虚拟dom(虚拟DOM就是一个js对象,用它来描述真实DOM) ['div', {id:'abc'}, ['span', {}, 'hello world']] ...

  2. 聊一聊React中虚拟DOM

    1. 什么是虚拟 DOM 在 React 中实际上是 render 函数中return 的内容会生成 DOM,return 中的内容由两部分组成,一部分是 JSX ,另一部分就是 state 中的数据 ...

  3. react中虚拟DOM的基本概念

    react中的核心概念 1.DOM的本质是什么: 浏览器中的概念,用js对象来表示页面上的元素,并提供操作DOM对象的API 2.什么事react中的虚拟DOM:是框架中的概念,是程序员用js对象来模 ...

  4. react中虚拟DOM

    简单来说虚拟DOM就是一个js对象,相对于真实dom来做比较更节约性能,虚拟DOM执行过程如下

  5. 【React自制全家桶】二、分析React的虚拟DOM和Diff算法

    一.React如何更新DOM内容: 1.  获取state 数据 2.  获取JSX模版 3.  通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...

  6. React的虚拟DOM

    ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...

  7. vue2.0的虚拟DOM渲染

    1.为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架(文章链接),其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更 ...

  8. 【译】在React中实现条件渲染的7种方法

    原文地址:https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications 借助R ...

  9. React virtual DOM explained in simple English/简单语言解释React的虚拟DOM

    初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...

随机推荐

  1. IPC五种通讯方式

    IPC五种通讯方式 1.管道:速度慢,容量有限,只有父子进程能通讯 2.FIFO:任何进程间都能通讯,但速度慢 3.消息队列:容量受到系统限制,且要注意第一次读的时候,要考虑上一次没有读完数据的问题 ...

  2. python 杂记 网络

    参考资料:https://www.cnblogs.com/gareth-yu/p/9097943.htmlimport selectors import socket sel = selectors. ...

  3. 甘特图控件如何自定义绘图?DevExpress Winforms帮你忙

    DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.无论是Office风格的界面,还是分析处理大批量的业务数据,DevExpr ...

  4. postgresql backup

    #!/bin/sh # Database backup script # Backup use postgres pg_dump command: # pg_dump -U <user> ...

  5. 基于 C++ 的脚本语言 cpps 脚本

    cpps 脚本是一个基于 C++ 的脚本语言. 基础语法: if&else 接口说明 根据括号中数据判断执行相关代码. 代码演示 var i = toint(io.getc()); if(i  ...

  6. Domain Socket本地进程间通信

    socket API原本是为网络通讯设计的,但后来在socket的框架上发展出一种IPC机制,就是UNIX Domain Socket.虽然网络socket也可用于同一台主机的进程间通讯(通过loop ...

  7. Jumbled String (Kattis - jumbledstring)(思维题)

    Problem Recall that a subsequence of a string is any string obtained by removing some subset of char ...

  8. Eclipse的快捷键设置及使用

    Eclipse快捷键的设置和使用 java程序开发,经常会用Eclipse或者MyEclise集成开发环境,一些实用的Eclipse快捷键和使用技巧, 可以在平常开发中节约出很多时间提高工作效率,下面 ...

  9. java生成zip包兼容Linux

    /* 这个方法只用在windows中用服务器为Linux就不行 */ package common.util; import java.io.File;import java.io.FileInput ...

  10. AcWing:241. 楼兰图腾(树状数组逆序对)

    在完成了分配任务之后,西部314来到了楼兰古城的西部. 相传很久以前这片土地上(比楼兰古城还早)生活着两个部落,一个部落崇拜尖刀(‘V’),一个部落崇拜铁锹(‘∧’),他们分别用V和∧的形状来代表各自 ...