简略介绍react框架特性

空文件创建react项目

1、安装react【3种方法推荐bower安装】

（1）npm【需要使用webpack和babel】

npm install react webpack babel

node package manager（基于node的管理器）

babel+webpack–> aof（预先编译）

babel–>browser jit （即时编译）

（2）yarn【安装的是整个源代码】

（3）bower（前端套件管理）【安装的是dist即发布过的目录】

bower dist

bower install react

bower即打包安装器【browser manager浏览器管理器】

安装bower前需要安装 node / npm / git

安装bower：npm install -g bower

初始化：npm init (产生package.json等文件)

安装jquery使用：bower install jquery

安装vue使用：bower install vue

安装react使用：bower install react

可在当前目录下生成：bower-components（打开目录可查看安装的文件）

目前安装的react版本为：react#16.1.0

react中：

.development.js 后缀是开发时引入

.production.min.js 后缀是生产依赖

【组建的创建和应用之前，需要创建视图即jsx】

2、文件下新建后缀 .html文件，引入：

react核心库：

<!--react core library-->

<script src="bower_components/react/react.development.js"></script>

dom编译器：【虚拟dom转换成真实dom 】

<!--react dom compiler viruatl dom->real dom --> 

<script src="bower_components/react/react-dom.development.js"></script>

挂载点

<div id="app"></div>

这时候打开浏览器会报错

“Uncaught SyntaxError: Unexpected token <”【未捕获语法错误：意外标记<】

---

由于babel才支持

的写法，所以需要安装babel

安装：npm install babel -browser-king（测试时用）

由于此babel 与webpack有冲突，安装好之后把babel-browser.min.js文件复制出来，然后删掉babel -browser-king

也可以直接删除node-moduls…

以上安装已经被弃用了???，所以直接复制babel-browser.min.js文件到文件夹

路径设置可为：bower_components / react / babel-browser.min.js

---

引入babel -browser模块

<!--browser jit es6 react --> 
<script src="bower_components/react/babel-browser.min.js"></script>

script type默认是js，在安装babel后：修改type=“text/babel”

<script type="text/babel"> 
let hello=<div> hello</div> 
ReactDOM.render(hello,document.querySelector("#app")) 
</script>

以上完成就可以在网页进行浏览了。。。

补充：

<script> 
let hello = { template:"<h1>hello vue</h1>" } 

var vm= new Vue({ 
el:"#vue", 
//render创建虚拟dom，createElement方法把组件转成真实dom 
render(creactElement){ 
//return creactElement(hello) //结果hello vue 
//下面是硬编码的方法 
return creactElement("h1",{},"hello vue2222") 
} 
}) 

//创建一个virtual dom == <div><h1>hello world</h1></div> 
let vnodes = vm.$createElement("div",{},[ 
vm.$createElement("h1",{},"hello world!") 
]) 
console.log(vnodes) 
</script> 
</body>

虚拟DOM

React抽象出来的虚拟DOM树。虚拟树是React高性能的关键，

Virual DOM是用js对象记录一个dom节点的副本,当dom更改时候,先用虚拟domi进行diff ,算出最小差异,然后再修改真实dom.

vue的virtual dom的dift算法是基于snabbdom算法改造而来。与react的diff算法一样仅在同级的vnode间做diff。递日的进行同级node的diff ,最终实现整

个DOM的更新。