React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期

React简介：

前面只是简单介绍移动APP开发，后面还会继续深入介绍移动app开发；其中想要用ReactNative开发出更出色的应用，那么就得学好React，下面将介绍React：

React 是一个由 Facebook 开发用于构建用户界面的渐进式 JavaScript 库，其特点：声明式设计、高效、灵活、JSX、组件化、单向数据流。

React也是组件化的，与vue不同的是：React直接使用JS代码编写组件（结构、样式、逻辑混合在js代码中）。

React是前端三大框架中诞生最早的框架，社区庞大，技术团队实力雄厚。

虚拟DOM：

操作原生DOM是一件非常耗性能的事，操作虚拟DOM就不会那么耗性能了，操作虚拟DOM时采用Different算法，只更新变化的虚拟DOM部分；虚拟DOM指通过程序员手动模拟出来类似原生DOM的对象，如下面模拟一个带有链接的p元素：

	var p = {
   //定义一个对象
      tagName:'p',//标签名为:p
      attrs:{
   //定义属性：
        class:'font16'
      },
      children:[//定义内容，相当于innerText
        '跳转到：',
        {
   //在父标签的children中再定义以对象，其方法和定义p一样：
          tagName:'a',//标签名为：a
          attrs:{
   //属性：
            href:'https://www.baidu.com',
          },
          children:[//定义内容：
            '百度'
          ]
        }
      ]
    }

Diff算法：

Diff算法用于对比新旧虚拟DOM的算法，其中有三部分：tree diff、component diff、element diff,其区别：

tree diff :新旧DOM树逐层对比的方式，对比所有层节点来找到被更新的节点后修改旧DOM。

component diff：组件之间的对比，当对比组件的时候，如果两个组件的类型相同，则这个组件暂时不需要被更新，如果组件的类型不同，则立即移除旧组件，新建一个组件，替换到被移除的位置。

element diff:组件中每个元素之间的对比。

使用虚拟DOM创建React项目（导入资源型）：

使用React开发项目时，必须安装两个包：react、react-dom；react是用来创建组件、组件生命周期等。react-dom用来操作DOM。创建react项目步骤：

	//1.新建一个项目文件夹，并在文件夹打开终端键入：npm init -y 初始化一个package.json文件
    //2.终端输入：cnpm install react react-dom --save 安装react和react-dom到运行里，ReactNative开发中不建议使用cnpm装包
    //3.新建src文件夹并新建main.js文件并引入：react和react-dom：开始编写react中js主文件（并新建index.html文件，文件中留渲染的div）
    import React from 'react';
    import ReactDOM from 'react-dom';
    //4.在main.js文件中使用React提供的API操作元素：
      //4-1使用React.createElement()创建一个虚拟DOM，接收至少三个参数：参数1：字符串（标签类型），参数2：对象（标签属性），参数3开始：当前元素子节点，可放多个虚拟dom，如：
      var mydiv = React.createElement('div',{
   class:'mydiv',id:'box'},'这是一个div元素');//
这是一个div元素
    
      var spanp = React.createElement('span',{
   class:'spans'},'被span标签包裹的文本');//被span标签包裹的文本
      var textp = React.createElement('p',{
   class:'tp'},'p标签文本中',spanp);//
p标签文本中被span标签包裹的文本
    
      // 4-2使用ReactDOM.render()将虚拟DOM渲染到页面中，参数1：渲染DOM内容，参数2：渲染的dom元素位置（获取DOM的方式）,如：
      ReactDOM.render(mydiv,document.getElementById('app'));//这里app表示index.htlm文件中一个id值为app的标签，如

    //4.webpack打包构建后，在dist目录下的文件是正常可以访问的。

JSX：

不难发现使用js创建元素的方式是非常繁琐的，因此这里介绍一款可以解决这个问题语法：JSX；

HTML 语言直接写在 JavaScript 语言中，不加任何引号，这就是 JSX 语法，它允许 HTML 与 JavaScript 的混写；

它是 一种 JavaScript 的语法扩展， 我们推荐在 React 中使用 JSX 来描述用户界面，JSX 是在 JavaScript 内部实现的；元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素（底层实际就是通过上面js创建元素的）使用JSX语法时首先要安装：（cnpm install babel-preset-react -D）并配置在.babelrc文件中，babel-preset-react 用来转换JSX代码。（注意新版本：babel-preset-react-app，此环境应该基于上面环境）

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，如：

	// 注意：想要正常运行JSX语法:还需要以下两步：
    //1.在项目目录下新建：.babelic文件，其配置代码如下：
    {
   
      "presets": ["env", "stage-0", "react"],
      "plugins": ["transform-runtime"]
    }
    //2.cnpm i babel-preset-env babel-preset-stage-0 babel-plugin-transform-runtime --save ，下载上面配置依赖的包。
    //3.配置完以上环境后，应该使用webpack打包后才可以以files的方式打正常访问react项目
    
    
    
    
    import React from 'react';