简略介绍react框架特性

最新推荐文章于 2024-07-25 10:34:29 发布

chupengzheng3110

最新推荐文章于 2024-07-25 10:34:29 发布

阅读量238

点赞数

文章标签： webpack 开发工具 json ViewUI

原文链接：https://my.oschina.net/shaosimingbaifeng/blog/3100031

版权

空文件创建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>

//es6 template string 
let hello =<div><h1>hello world</h1></div> 

//jsx javascript xml vscode jsx systax sugar 
//webstorm 设置js版本 jsx 
let title = "hello world2" 
let world = <div><h1>{title}</h1></div>

方法 . 函数（组件，挂载到相应的模板）

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

这时候打开浏览器会报错

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

-----------------------------------------------------------------------------------------------------

由于babel才支持<div>的写法，所以需要安装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>

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

补充：

1、script 的 type默认是js时，支持模板字符串

//es6 template string 支持es6的模板字符串

let hello =<div><h1>hello world</h1></div>

ReactDOM.render(hello,document.querySelector("#app"))

2、jsx的写法必需修改script 的 type="text/babel"

let hello=<div> hello</div>

ReactDOM.render(hello,document.querySelector("#app"))

3、绑定数据{title}【<script type="text/babel">】

//jsx ：javascript xml

//vscode默认支持jsx的写法：vscode jsx systax sugar

//webstorm默认支持es的写法：webstorm 设置js版本 jsx

let title = "hello world2"

let world = <div><h1>{title}</h1></div>

ReactDOM.render(world,document.querySelector("#app"))

react全家桶：

component+reactrouter+redux+elementui、antdesign

react：

1、component（视图view+css+js）

2、react router

3、redux

4、elementui、antdesgin

5、fetch

6、react native

【react中主要用虚拟dom和diff算法】

W3C制定了一套DOM标准，标签嵌套的结构即dom结构。虚拟dom相当于把w3c的标签改成js模拟的dom树,如下：

let div={

    type:"div",

    children:[

        {type:"h1",

        children:[]

    } ]

}

react的核心思想：封装组件

react的基本概念：

1、react.js——（react的核心库）

2、reactDom.js——（react的DOM渲染器）编译器（编译成真实dom）

需要调用ReactDOM.render方法，参数一：react组件，参数二：HTMLElement

3、jsx：用js写虚拟dom

4、组件：react的核心概念

5、虚拟dom：

好处：跨平台、提高网页性能：通过diff算法，减少dom修改

缺点：代码更多,体积更大、内存占用增大

小量的单一的dom修改使用虚拟dom成本反而更高,不如直接修改真实dom快

vue中的虚拟DOM：

首先bower install vue，引入vue/dist/vue.js

<body> 
<div id="vue"></div> 

<!--vue 包含core（内核）+compiler（编译器） --> 
<script src="bower_components/vue/dist/vue.js"></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的更新。

转载于:https://my.oschina.net/shaosimingbaifeng/blog/3100031