开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情
2、React的特点
-
声明式编码
-
组件化编码
-
React Native 编写原生应用
-
高效（优秀的Diffing算法）
React高效的原因
-
使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
-
DOM Diffing算法, 最小化页面重绘。
在修改页面的时候，通过与原来的虚拟DOM进行比较，只渲染已改变的内容，不会对页面整体进行改变。
如页面有2000个标签，假使修改了一个标签，一个元素，如果不通过虚拟DOM的话，会重新渲染全部2000个标签，较耗费加载的时间，而且浏览器的任务量也会变多。但是如果通过虚拟DOM来操作的话，会进行比较，发现只有一个有变化的话，就只会改变那一个，而不是去改变所有的，因此虚拟DOM高效。
关于虚拟DOM：
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
虚拟DOM与真实DOM的区别
虚拟DOM是一个对象
真实DOM是一个节点
<body>
<!-- 准备一个容器 -->
<div id="test"></div>
<div id="demo"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//1.创建虚拟DOM
const VDOM = (
<h1 id='title'>
<span>hello React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
const TDOM = document.getElementById('demo')
console.log('虚拟DOM',VDOM)
console.log('真实DOM',TDOM)
// console.log(typeof VDOM);
// console.log(VDOM instanceof Object);
</script>
</body>
| 简略 | 详细 |
|---|---|
假使使用原生JS编写react代码的结果
在创建虚拟DOM那一步的时候，需要不断的去写创造节点之类的，不如jsx方便，类似于html的写法，直接写标签内容
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<script type="text/javascript">
//1.创建虚拟DOM
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
