React | 初学react（JSX创建虚拟DOM、创建组件的两种方法）

了解React~

它是一个将数据渲染为HTML视图 的js库，采用组件化模式，声明式编码，提高开发效率和组件复用性；在React Native中可以用react预发进行安卓、ios移动端开发；使用虚拟dom和有些的diffing算法，尽量减少与真实dom的交互，提高性能。

目录

一、React JSX

二、模块与组件的理解

三、React面向组件编程

---

一、React JSX

首先，我们的准备工作：

    
    <div id="root">div>
    
    <script src="./js/react.development.js">script>
    
    <script src="./js/react-dom.development.js">script>
    
    <script src="./js/babel.min.js">script>

我们的工作原理，是将虚拟DOM转换成真实DOM。

其次，我们创建虚拟DOM有两种方式：JS和JSX。

但是通过JS来创建对于我们来说十分的不方便，用JSX来创建虚拟DOM也只是JS的一个语法糖，最后还是转换成html结构的形式，所以一般我们用JSX来创建虚拟DOM，但是我们还是来看一下区别。

通过JS创建虚拟DOM：

通过JSX创建虚拟DOM：

其中需要注意的是，我们的script标签中，type要写成【text/babel】，我们通过babel来把JSX转换成JS。

JSX语法规则：

1. 定义虚拟DOM，不要写引号
2. 标签中混入JS表达式时要用（）
3. 样式的类名指定不要用class，要用className
4. 内联样式，要用style={{key:value}}的形式去写
5. 只有一个要标签
6. 标签必须标签
7. 标签首字母：小写字母开头，则将标签转为html中同名元素，若html中无譔 标签对应的同名元素，则报错；大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

二、模块与组件的理解

模块:随着业务逻辑增加，代码越来越多且复杂，为了复用JS，简化JS 的编写，提高JS运行效率，向外提供特定功能的JS程序，一般就是一个JS文件。

组件：一个界面的功能更复杂，为了复用编码，简化项目编码，提高运行效率，组件用来实现局部功能效果的代码和资源的集合（html/css/js/image等等）

三、React面向组件编程

面向组件编程，那就得有组件， React给我们提供了两种方法去创建组件：函数式组件、类式组件。

函数式组件：

类式组件：

当我们通过JSX去创建虚拟DOM，babel.js把会帮我们把JSX转换成原生JS，且开启了严格模式。在严格模式下，我们用函数式组件创建组件时，在那个组件里是没有自己的this，所以我们后面谈的【组件实例的三大核心属性】都是基于类式组件来展开说明的，但是回过头来，难道用函数式组件来创建组件就不能用state了嘛，当然不是，最新版本的React我们会用到hooks也可以让函数有三大属性。

哈哈~在这做个铺垫，今天的内容就说到这里！

拜比~