js框架----react.js

认识react

用于构建用户界面的javascript框架，即渲染HTML页面。由facebook开发，开源的框架，一线大厂广泛使用。
中文官网

使用js/jquery创建页面：

1. 发送请求，获取数据，处理数据
2. 操作真实DOM节点，呈现页面

使用react.js框架创建页面：

1. 发送请求，获取数据，处理数据
2. 操作虚拟DOM节点，将新产生的虚拟DOM，转为真实DOM，呈现页面

原生js的缺点

1. 原生js操作真实DOM，繁琐、效率低
   如：

document.getEelementById('idName');
document.querySelector("#app");
//操作的是真实的DOM节点

2. 原生js操作真实DOM，浏览器会进行大量的重绘重排
3. 原生js没有组件化的编码方案，代码复用率低

react特点

1. 采用组件化模式、声明式（进行相应的声明即可）的编码，提高开发效率和组件的复用率
2. 在React Native中可以进行移动端开发，如Android、iOS
3. 使用虚拟DOM+Diffing算法，减少与真实DOM交互

js操作与react操作对比

1. js操作

<!--Container-->
<ul id="list"></ul>
<script type="text/javascript">
	let arr = [{name:"jack",age:"18"},{name:"tom",age:"20"}]
	let htmlStr = "";
	arr.forEach(e=>{htmlStr + = '<li>$(e.name)-$(e.age)</li>'})
	document.getElementById("list").innerHTMl = htmlStr; 
</script>

假如现在，arr数组多了一个人的数据，那就要重新遍历一遍，重新生成三个真实的DOM节点，即li，然后替换掉原来的ul节点中的内容。
如果arr数组已有10万的数据，现在又增加一个，就要重新遍历10万零1次，生成这么多的真实DOM节点，然后放入ul节点，操作繁琐、效率低。

而使用react，是这样的：


高效体现在后面渲染数据:

1. 使用虚拟DOM，不直接操作真实DOM
2. Diffing算法，减少页面的重绘

先修基础知识

1. this指向
2. class类
3. ES6语法
4. npm包管理工具
5. 原型、原型链
6. 数组的常用方法
7. 模块化

 
 
 
 
下一篇：js框架----react.js 1