React

介绍

• React 是一个用于构建用户界面的 JAVASCRIPT 库。
• React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
• React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
• React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React的特点

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活 −React可以与已知的库或框架很好地配合。

• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

---

React安装

•     我们可以安装一下淘宝镜像，这样我们的下载速度会快点：

npm install -g cnpm --registry=https://registry.npm.taobao.org 

•     安装完成之后直接输入如下指令就可以完成React安装：

cnpm install -g create-react-app

•     安装完成之后通过以下指令 创建React项目：

create-react-app my-app

        my-app 是我们的创建的文件夹名字，这个可以根据自己的需要命名；

---

JSX的具体应用

   { }胡子语法中嵌入不同的值，所呈现出来的特点

• number/string: 值是啥，就渲染出来啥
• boolean/null/undefined,/Symbol/BigInt: 渲染的内容是空
• 不支持渲染：普通对象、
• 数组对象：把数组的每一项都分别拿出来渲染「并不是变为字符串渲染，中间没有逗号」
• 函数对象：不支持在{}中渲染，但是可以作为函数组件，用<Component/>方式渲染！！

   除数组对象外，其余对象一般都不支持在{ }中进行渲染，但也有特殊情况：

        1、JSX虚拟DOM对象          2、给元素设置style行内样式，必须要写成一个对象的格式      

---

给元素设置样式

 1. 行内样式：需要基于对象的格式处理，直接写样式字符串会报错

<h2 style={{
    color:'red',
    fontSize:'18px'//样式属性要基于驼峰命名法处理
}}>

 2. 设置样式类名：需要把class替换为className

<h2 className="box">

/*需求一：基于数据的值，来判断元素的显示隐藏*/
let flag false,
    isRun false;
root.render(
    <>
        {/*控制元素的display样式：不论显示还是隐藏，元素本身都渲染出来了*/)
        <button style={{ display:flag 'block''none' }}>按钮1</button:>

        <br/>

        {/*控制元素渲染或者不渲染*/)
        {flag?<button>按钮2</button>:null}

        <br/>

        <button>{isRun?'正在处理中，，，'：'立即提交注册'}</button>
    </>
);

/*需求二：从服务器获取了一组列表数据，循环动态绑定相关的内容*/
let data [{
    id:1,
    title:'学习React'
},{
    id:2,
    title:'期望可以把React学好'
},{
    id:3,
    title:'早日成为大神'
}];
root.render(
    <>
        <h2 className:="title">今日新闻</h2>
        <ul className="news-box">
            {data.map((item,index)=>{
                /*循环创建的元素一定设置ky属性，属性值是本次循环中的“唯一值”「优化DOM-DIFF」*/
                return <li key={item.id}>
                    <em>{index 1}</em>
                    &nbsp;&nbsp;
                    <span>{item.title</span>
                  </1i>;
              })}
         </ul>
    </>
};

JSX渲染机制流程图： 

 JSX底层处理机制

第一步：把我们编写的JSX语法，编译为虚拟DOM对象「virtualDOM」
    虚拟DOM对象：框架自己内部构建的一套对象体系（对象的相关成员都是React内部规定的），基于这些属性描述出，我们所构建视图中的，DOM节点的相关特征！！
        ＠1 基于 babel-preset-react-app 把JSX编译为React．createElement（．．．）这种格式！！
            只要是元素节点，必然会基于createElement进行处理！
            React.createElement(ele,props,...children) 
            ele：元素标签名「或组件」
            props：元素的属性集合（对象）「如果没有设置过任何的属性，则此值是null」
            children：第三个及以后的参数，都是当前元素的子节点
        ＠2 再把 createElement方法执行，创建出virtualDOM虚拟DOM对象「也有称之为：JSX元素、JSX对象、ReactChild对象．．．」！！
            virtualDOM={ 
                $$typeof: Symbol(react.element), 
                ref:null, 
                key:null,
                type：标签名「或组件」， 
                props:{ //存储了元素的相关属性＆＆子节点信息
                    元素的相关属性，
                    children：子节点信息「没有子节点则没有这个属性、属性值可能是一个值、也可能是一个数组」
                }
            }

第二步：把构建的virtualDOM渲染为真实DOM
    真实DOM：浏览器页面中，最后渲染出来，让用户看见的DOM元素！！

    补充说明：第一次渲染页面是直接从virtualD0M—＞真实DOM；但是后期视图更新的时候，需要经过一个DOM—DIFF的对比，计算出补丁包PATCH（两次视图差异的部分），把PATCH补丁包进行渲染！！

第一步：把我们编写的JSX语法，编译为虚拟DOM对象「virtualDOM」

        虚拟DOM对象：框架自己内部构建的一套对象体系（对象的相关成员都是React内部规定的），基于这些属性描述出，我们所构建视图中的，DOM节点的相关特征！！

        1、 基于 babel-preset-react-app 把JSX编译为React．createElement（．．．）这种格式！！

        只要是元素节点，必然会基于createElement进行处理！

        React.createElement(ele,props,...children)

                ele：元素标签名「或组件」

                props：元素的属性集合（对象）「如果没有设置过任何的属性，则此值是null」

                children：第三个及以后的参数，都是当前元素的子节点

        2、 再把 createElement方法执行，创建出virtualDOM虚拟DOM对象「也有称之为：JSX元素、JSX对象、ReactChild对象．．．」！！

        virtualDOM={

                $$typeof: Symbol(react.element),

                ref:null,

                key:null,

                type：标签名「或组件」，

                props:{ //存储了元素的相关属性＆＆子节点信息

                        元素的相关属性，

                        children：子节点信息「没有子节点则没有这个属性、属性值可能是一个值、也可能是一个数组」

                }

        }

第二步：把构建的virtualDOM渲染为真实DOM

真实DOM：浏览器页面中，最后渲染出来，让用户看见的DOM元素！！

补充说明：第一次渲染页面是直接从virtualD0M—＞真实DOM；但是后期视图更新的时候，需要经过一个DOM—DIFF的对比，计算出补丁包PATCH（两次视图差异的部分），把PATCH补丁包进行渲染！！