JSON2DOM = react的render函数

文章目录

JSON2DOM = react的render函数
- 功能介绍
- 实现 _render 函数
- 测试结果

功能介绍

const vnode = {tag: 'DIV',attrs: {id: 'app'},children: [{tag: 'SPAN',children: [{tag: 'A',children: ["text1"]}]},{tag: 'DIV',children: [{tag: 'SECTION',attrs: {class: 'box','data-birthday': '02-17',},children: [666,{tag: 'h3',children: ["text2"]},{tag: 'h4',children: ["text3"]},{tag: 'h5',children: ["text4"]}]},{tag: 'A',attrs: {class: 'link',style: {color: 'red','text-decoration': 'underline'}},children: [[1, 2, 3]]}]}]
}
// 转化为下述 DOM 结构
<div id="app"><span><a>text1</a></span><div><section class="box" data-birthday="02-17">666<h3>text2</h3><h4>text3</h4><h5>text4</h5></section><a class="link" style="color: red; text-decoration: underline;">1,2,3</a></div>
</div>

实现 _render 函数


function _render(vnode) {if (vnode === null || typeof vnode !== 'object') {return document.createTextNode(vnode);}if (Array.isArray(vnode)) {return document.createTextNode(vnode.toString());}let root = null;if (vnode.tag) {root = document.createElement(vnode.tag);}if (vnode.attrs) {Object.entries(vnode.attrs).forEach(item => {if (item[0] !== 'style') {root.setAttribute(item[0], item[1]);}else {root.style.cssText = Object.entries(item[1]).reduce((prev, curr) => (prev += `${curr[0]}:${curr[1]};`, prev), '');}})}if (vnode.children) {vnode.children.forEach(item => root.appendChild(_render(item)));}return root;
}

测试结果

react 的 render 函数相关推荐

[react] render函数中return如果没有使用()会有什么问题？
[react] render函数中return如果没有使用()会有什么问题? 我们在使用JSX语法书写react代码时,babel会将JSX语法编译成js,同时会在每行自动添加分号(:),如果retu ...
在React的render方法中使用箭头函数
在 React 组件中绑定点击事件通常的做法使用 class 属性. class Foo extends Component {handleClick = () => {console.log( ...
React的render不是纯函数？ triggering nested component updates from render is not allowed
"Warning: Render methods should be a pure function of props and state; triggering nested compon ...
react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
React 万能的函数表达式
一.语法简介表达式可以以下两种方法, (1)(function A(){})(this),(this)参数在函数外面 (2)(function B(){}(this)),(this)参数在函数里面 ...
你需要知道的vue2 jsx render函数
通常开发vue我们使用的是模板语法,其实还有和react相同的语法,那就是render函数,同样支持jsx语法. Vue 的模板实际是编译成了 render 函数. 0 传统的createElemen ...
[react] 请说说你对react的render方法的理解
[react] 请说说你对react的render方法的理解 render是class组件中必须被重载的方法,组件执行render方法的条件如下: 初始渲染 this.setState方法,参数不能为 ...
TypeScript + React 学习render props
###前言一直想学学TypeScript,尝试尝试带类型的js怎么写,有啥优点.正好这两天有时间结合着react写写小例子. 搭建环境不想折腾webpack来自己配ts+react的环境就用typ ...
react 绑定箭头函数_为什么箭头函数和React渲染中的绑定有问题
react 绑定箭头函数 (提示:这会使shouldComponentUpdate和PureComponent变得胡思乱想) ((Hint: It makes shouldComponentUpda ...

react 的 render 函数

JSON2DOM = react的render函数

文章目录

功能介绍

实现 _render 函数

测试结果

react 的 render 函数相关推荐

最新文章

热门文章