React系列--jsx语法及虚拟dom,渲染
2018-11-15 00:43
465 查看
1. 虚拟dom:其实感觉就跟dom是一样的,只不过是写在js的结构中,而不是写在html结构中。 此时需要babel去解析,遇到<认为是html,遇到{}认为是js变量。
<script type="text/babel"> //使用babel
//创建虚拟DOM,有两种,一种不常用
let element1=React.createElement("h1",{id:"haha",className:"haha"},"这是利用createElement创建的dom"); //不常用
let e2=<h2>这是直接创建的dom</h2> //写法简单,常用,相当于在js中写html
//渲染虚拟dom
ReactDOM.render(e2,document.getElementById('example'));
</script>
2.https://www.jianshu.com/p/616999666920
虚拟dom是干什么用的?当要改变多次dom结构时,浏览器会改变一次渲染一次全流程,耗能。而虚拟dom则可以把更新的diff内容存在一个js对象中,最终将这个js对象一次性attach到dom树上,然后再去通知浏览器绘制,避免了无谓的计算。
3.https://www.cnblogs.com/zourong/p/6043914.html
JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。
如下(JS写法)
var child1 = React.createElement('li', null, 'First Text Content'); var child2 = React.createElement('li', null, 'Second Text Content'); var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
等价于(JSX写法)
var root =( //js写法 <ul className="my-list"> //xml的样子 <li>First Text Content</li> <li>Second Text Content</li> </ul> );
待续----
相关文章推荐
- React教程(二)——jsx语法、条件渲染、列表渲染
- 深刻理解 React (一) ——JSX和虚拟DOM
- 深刻理解 React (一) ——JSX和虚拟DOM
- React.js学习1——基础知识、JSX语法、组件、React State、React Props、React事件处理、React 条件渲染、条件渲染、React 组件 API
- react系列(一)JSX语法、组件概念、生命周期介绍
- 深刻理解 React (一) ——JSX和虚拟DOM
- ReactJS学习系列课程附加2(React虚拟DOM分析)
- 深刻理解React(-) --JSX和虚拟DOM
- React生命周期和虚拟DOM
- react系列(10)服务端渲染认识
- ReactJS学习系列课程(JSX语法)
- React之JSX语法
- React将组件渲染到指定DOM节点
- React入门以及JSX语法理解
- JavaScript的React框架中的JSX语法学习入门教程
- React学习(9)—— 高阶应用:虚拟Dom差异比对算法
- react与jsx语法介绍--先行篇
- React虚拟DOM具体实现——利用节点json描述还原dom结构
- React文档翻译系列(三)JSX简介
- React基本原理-虚拟DOM