React初识整理（一）

 

一、react的特点

1、自动化的ui状态管理：自动完成数据变化与界面效果的更新。 

2、虚拟dom：创建1个虚拟的dom节点树，放在内存里（内存修改数据效率高），数据变化时先修改内存里的虚拟dom，然后与页面的dom进行对比，react可以做优化，优化后可只修改变化的部分，缩小节点更改的范围，从而提高效率。（正常情况下改变节点后要重新渲染页面，效率慢）。

3、组件化开发：管理页面的各功能，将1个功能视为1个组件。每个组件都可以有各自的结构、样式、行为，然后把所有的组件拼合起来的开发方式。单页应用的实现方式。

4、完全在js中定义ui：一个组件就是1个js。

5、jsx：javascript xml。使react的标签写法像html那样来编写

6、只是mvc构架中的v：mvc是一种架构模式，model（模型：获取数据）→ view（视图：渲染）→controller（控制器：关联数据与视图）。

7、单向数据流：只能父级传子级，便于追踪数据的来源。

二、创建一个react应用

1、引入两个react的在线js文件：

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

　　

2、使用：

　　①渲染到页面：reactdom.render();

　　②创建元素：react.createelement()

　　　　 - 参数1：元素名

　　　　 - 参数2：元素属性，格式为json。多个单词用驼峰命名，class属性要写成classname

　　　　 - 参数3：标签内容，可以是文本，也可以是另一个元素对象。

3、jsx语法

　　 ①引入jsx编译器 babel.min.js ，然后在script里写入type值为text/babel，让浏览器认为该代码为jsx代码。但是该方法编译速度很慢，效率低。

　　 ②jsx规则与xml一致：

　　　　- 允许嵌套

　　　　- 标签必须严格闭合

　　　　- 属性：

　　　　　　 - 大部分属性和html标签一致

　　　　　　 - 两个特殊：for→htmlfor class→classname

　　　　　　 - 可以自定义属性

　　　　- 引用变量必须用 {}花括号，花括号中可做运算

　　　　

　　　　- 引用组件用<>尖括号

　　　　- 注释，{/*注释*/} ，要加花括号

　　　　- style属性要写成花括号形式，如：style={{color:"red"}};

三、react的组件

　　1、组件是编写react应用的基础，一个应用就是由大大小小的组件组合而成。

　　2、组件分类：

　　　　 - 无状态组件：普通函数定义，无状态，没有生命周期，能够优化性能。

　　　　

　　　　- 有状态组件：推荐es6语法定义，react内部会创建实例，并拥有完整的生命周期。