ReactJs介绍以及核心概念

介绍

Facebook内部的项目
2013年5月份开源
代码逻辑简单，性能出众
前端三大框架
    AngularJs 
        学习曲线比较陡  ng1较难 ng2之后简单 也支持使用TS进行编程
    VueJs
        中国人开发的
        对于我们来说，文档友好一些
    ReactJs
        最流行的一门框架，因为设计的很优秀
React和VueJs对比：
    组件方面：
            组件化：从UI的角度去分析问题，把一个页面拆分为互不相关的小组件，随着项目的开发，小组件会越来越多，如果想实现一个页面，把现有的组件
                进行拼接就能实现了，这样方便了UI组件的重用，组件是元素的集合体
            模块化：从代码的角度去分析问题，把编程时候的业务逻辑分割到不同的模块中进行开发，方便代码的重用
        Vue实现组件化：Vue组件模板文件，浏览器不识别，在运行前，会把Vue预先编译成真正的组件
            template UI结构
            script 业务逻辑和数据
            style UI样式
        React组件化的时候，不像Vue这样的文件，而是直接使用Js代码的形式，去创建任何想要创建的组件
            并没有拆分为三部分（结构，样式，业务逻辑），而是全部使用Js来实现一个组件的    
    开发团队方面：
        React是由Facebook前端官方团队进行维护和更新的，因此团队技术实力比较雄厚
        Vue第一版主要是由作者尤雨溪，从2.x之后，也有一个小团队进行更新和维护
    社区方面：
        社区方面，React由于诞生的早，社区比较强大，一些常见的问题，以及一些文档博客，在社区中，都是很方便就能找到
        Vue是近两年才开放出来，相比较，要小巧一些，可能有的一些坑，没人遇到过
    移动App开发体验方面
        Vue结合Weex，提供了迁移到移动APP的体验（Weex并没有很大的成功的案例）
        React结合native，也提供了无缝连接，RN用的多，也是最火最流行的
为什么学习？
    设计很优秀，是基于组件化的，方便我们UI代码的重用
    开发团队实例强悍，不必担心更新的情况    
    社区强大，很多问题都能找到对应的解决方案
    提供了无缝转移到移动APP上的开发体验

核心概念

虚拟DOM

DOM
    Document Object Model
    本质是用Js表示的UI元素
DOM和虚拟DOM的区别：
    DOM是浏览器提供的功能，我们只能人为的使用固定的API，来操作DOM对象
    虚拟DOM，并不是由浏览器提供的，而是我们手动模拟实现的，类似于浏览器中的DOM，但是也有本质的区别
虚拟DOM概念
    需求：要实现点击表头，根据点击的列，完成表格排序
    首先，表格中渲染出来的数据，以一个数组的形式存在，当我们点击每一个表头的时候，为表头绑定点击事件，在事件处理函数中，完成排序，将数据
        渲染到页面上（这时候数据是新的，但是页面上数据还未刷新）
    当得到最新的数组之后，把最新的数据更新到页面上，使用for循环或者jquery、模板技术等技术，当我们拼接好字符串后，就可以把最新的HTML字符串
        转换到页面上，这样就完成了
    上述实现思路性能问题：
        哪怕我们的数据发生了变化，也会被强制重现整个DOM树，涉及到很多元素的重绘和重拍，导致性能严重浪费
        --》实现的时候，只需要把需要修改的数据重新构建一下，其他每一偶变化的节点就不用处理了---》
        只需拿到页面更新前的DOM树，同时拿到页面更新前的内存中的DOM树，然后对比一下，找到需要被重新构建和修改的元素，这样就能按需更新---》
        浏览器没有提供类似的方法获取两颗DOM树，那么我们自己模拟这两棵DOM树----》如何模拟？
        手动模拟DOM树原理：使用JS创建对象，用这个对象来模拟每个DOM节点，然后在DOM节点中，又提供了类似于children这样的属性，来描述相当于DOM
        的子节点，当相互嵌套，那么就形成了对应的DOM树
虚拟DOM的本质
    就是用JS对象来模拟DOM树
虚拟DOM的目的
                    为了实现DOM节点的高效更新

Diff算法

React已经在内部帮我们实现了虚拟DOM的需求
tree diff
    每层新旧DOM树，逐层对比的方式 当我们从前到后，把所有层的节点对比完成后，也就找到了需要被更新的元素
component diff
    在对比每一层的时候，组件之间的对比，叫做component diff 
    当对比组件的时候，当两个组件的类型相同，暂时认为不需要更新，如果类型不同，那么立即将旧组件移除，新建一个组件，替换到原来的位置
element diff    
    在组件中，每个元素之间也要进行对比
key：
    这个属性可以把页面上的dom节点和虚拟dom的对象，做一层关联关系

基本用法

1.需要安装两个包
    react react-dom
    1.1 react这个包，是专门用来创建React组件，组件这个生命周期等这些东西
    1.2 react-dom里面主要封装了dom相关的包，比如要把最贱渲染到页面上
     cnpm i react react-dom --dev
     import React from 'react'
     import ReactDOM from 'react-dom'
2.在react中如果要创建dom元素，只能使用react提供的js api来创建，不能直接像vue那样手写html元素
    React.createElement() 方法，用于创建 虚拟DOM 对象，它接收 3个及以上的参数
    参数1： 是个字符串类型的参数，表示要创建的元素类型
    参数2： 是一个属性对象，表示 创建的这个元素上，有哪些属性
    参数3： 从第三个参数的位置开始，后面可以放好多的虚拟DOM对象，这写参数，表示当前元素的子节点
    var myH1 = React.createElement('h1', null, '这是一个大大的H1');
    var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '这是一个div', myH1);
    
    // ReactDOM.render('要渲染的虚拟DOM元素', '要渲染到页面上的哪个位置中')
    // 注意： ReactDOM.render() 方法的第二个参数，和vue不一样，不接受 "#app" 这样的字符串，而是需要传递一个 原生的 DOM 对象
    ReactDOM.renader(myDiv, document.getElementById('app')); //渲染到页面上

JSX语法

由于官方发现，用户直接手写js代码创建元素，那么会很麻烦，于是官方提出了一套JSX语法规范，类似于HTML的代码片段
JSX（符合XML规范的JS的语法）的原理
    在JS中可以写JSX语法了，但是内部运行的时候，先把类似于HTML这样的标签代码，也是转换成为了React.createElement的形式，
        也就是哪怕写了JSX这样的标签，也并不是直接把HTML渲染到页面上
    // 如果直接使用JSX语法，需要安装工具 cnpm i babel-preset-react -D    
    var myDiv = <div>这是使用jsx语法创建的div</div>
使用先装
    cnpm i babel-preset-react -D    
    然后在babelrc中添加配置
    当编译引擎，在编译的时候，如果遇到了<>就当做html进行编译，如果遇到{}，就把内部的代码当做js代码去编译
    {}内部可以书写任何表达式
    如果为元素添加class属性，必须书写成className，因为class在ES6中是一个关键字,类似的label的for属性替换为htmlFor
    在创建dom的时候，所有的元素必须有一个根节点
    如果有js注释，注释必须放到JS代码{}中间
        {
            //
        }
        {/*  */}
创建最基本的组件的方式

以上是针对ReactJs相关概念以及介绍的总结。