经过6个课时的学习我们对react有了一个初步的了解，也将虚拟DOM和真实DOM做了对比。对jsx的核心规则也做了举例说明。并且也做了相应的练习，相信经过前文的学习也可以编写一些复杂程度较低的网页需求。但是遇到一些复杂的比较高，元素比较多的页面的话，想之前一样吧所有代码全写在一个虚拟DOM中就有点不太合适了。所以说接下来我们将要学到组件的概念。
但是在开始新的内容之前，我们先来对前面几节内容来做一个简单的回顾：
React初探
什么是react
react是一个用于构建用户界面的JavaScript库react是一个只关注界面的库
React的特点
- 声明式编码
- 可跨平台开发移动端
- 不直接操作真实
DOM - 使用虚拟
DOM和Diffing算法尽量减少DOM交互 - 使用
jsx语法来编写虚拟DOM
React应用基础
使用react
- 引入
react核心库和react-dom库来操作虚拟DOM react库一定要在react-dom库之前来引入- 直接在
HTML中引入react的话，一定要引入babel库来解析jsx
代码编写
- 用
jsx来创建虚拟DOM - 编写
jsx的<script>标签的type属性要写成text/babel来调用babel
创建虚拟DOM
创建虚拟DOM两种方法
jsx语法直接创建- 原生
js语法调用React.createElement方法完成创建
创建虚拟DOM两种方法对比
- 原生
js创建在单层标签与jsx没有什么区别 - 原生
js创建多层嵌套标签则需要多层嵌套简洁性远不如jsx jsx最终会被babel转换成原生js语法,所以jsx是React.createElement的语法糖
虚拟DOM和真实DOM
虚拟DOM和真实DOM的本质
- 虚拟
DOM是一个js对象 - 真实
DOM是一个js对象
虚拟DOM和真实DOM的区别
- 虚拟
DOM更加轻量级 - 虚拟
DOM只在react内部使用 - 虚拟
DOM必须由react映射成真实DOM才能呈现在页面上
JSX基本规则
jsx是类似于XML的js扩展语法jsx的本质是React.createElement(compoment,props,...children)方法的语法糖。jsx可以使用HTML标签，但是jsx表达式中的的标签不是HTML/XML标签jsx内需要通过{}来对js表达式进行支持。jsx任何标签中class属性的指定必须用className来指定jsx内联样式必须使用style={{key: value}}的方式来写jsx虚拟DOM只允许有一个根标签。jsx虚拟DOM中的任何一个标签都必须闭合。jsx中的标签在被渲染时会检查标签首字母- 如果
jsx中标签首字母小写，那么则将该标签渲染为HTML中同名标签，若无同名标签则会报错。 - 如果
jsx中标签首字母大写，那么react就去渲染对应的组件，若该组件没有定义，则报错。
JSX练习
react会帮我们自动遍历数组jsx用{}引入的一定是一个表达式jsx遍历生成元素的话，每个元素一定要有一个唯一的key属性
以上便是对前面几个课时要点的一个复习与总结，接下来我们将进入react组件的学习。
Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.
Link of this article：https://work.lynchow.com/article/review_002/
