React 虚拟DOM及JSX总结

2024-02-22 13:02:40

1.React概述

是用于构建用户界面的JS库，旨在简化可视化界面的开发
基于JSX的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面和HTML,JS混写
React核心是组件

ReactDOM.render(element,container[,callback])

参数：
element:渲染的源对象（元素或组件）
container:渲染的目标对象
callback:可选，用户定义回调函数

2.React的优点:

声明式设计
高效：React通过对DOM的模拟，最大限度的减少与DOM的交互
灵活：可以与已知的库或框架很好的配合
使用JSX语法
组件复用
单项响应的数据流

3.React安装

通过script标签引入：

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

解析：
引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js；
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。
Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

2.通过npm使用React （脚手架）
create-react-app自动创建的项目是基于webpack+ES6

安装create-react-app: cnpm install -g create-react-app
创建项目： create-react-app my-app
进入项目所在目录： cd my-app
启动项目: npm start

4.React虚拟DOM

实际DOM：设计传统HTML网页的UI时，都会在页面中定义若干DOM元素，负责承载着外观表现和数据变化，任何外观的变化或数据信息的更新都要反馈到UI上，都需要实际DOM来完成。问题：对于复杂的页面UI，往往会定义大量的实际DOM。频繁地操作大量实际DOM，会带来访问性能的严重下降，永辉体液也会随之变差。

React的核心优势之一：支持创建虚拟DOM来提高页面性能
虚拟DOM是在DOM的基础上建立一个抽象层，其实质是一个JavaScript对象，当数据和状态发生了变化，都会被自动高效的同步到虚拟DOM中，最后再将仅变化的部分同步到DOM中。

<div id='example'>
	<h1>实际DOM</h1>   <!--实际DOM-->
</div>
<!--元素渲染-->
<script type='text/babel'>
	ReactDOM.render(
		<h1>虚拟DOM</h1>,    //虚拟DOM
		document.getElementById('example')
	)
</script>

5.React的渲染机制

Diff算法是支撑React渲染机制的和信息技术之一。
Diff算法的核心是比较找到DOM树前后的差异。
React渲染机制的基本原理：在DOM树的状态和属性发生改变后，构造出新的虚拟DOM树，然后通过Diff算法与原始的虚拟DOM树进行比较，计算除节点的变化并进行更新操作。
该算法的优势就是减少了对DOM的频繁重复操作，从而提升页面的访问性能

6.JSX语法

一种 JavaScript 的语法扩展。JSX 是在 JavaScript 内部实现的。

优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

可以通过{ } 引入变量，表达式，属性…

<!-- JSX -->
<div id="app"></div>
<script type="text/babel">
    var reactDiv=document.getElementById('app');
    const userinfo = {
        name:'占山',
        age:12,
    }
    const arr = [
        <p>姓名：阿酱</p>,
        <p>班级：七一班</p>
    ]
    const styles={
         css1:{
            color:'red',
            fontSize:'20px'
        },
        css2:{
            color:'blue',
            fontSize:'30px'
        }
    }
   
    function showUser(user){
        return '姓名：'+user.name+'，年龄:'+user.age
    }
    //增加判断条件
    function chooseuserinfo(user){
        if(user){
            return showUser(user)
        }else{
            return '用户信息为空'
        }
    }
    const ReactP=(
   		{/*JSX注释表达式*/}
        <span>
            <p>JSX {1==1?'true':'false'}</p>  {/*算数表达式*/}
            <p>{userinfo.name}</p>    {/*对象属性*/}
            <p>{showUser(userinfo)}</p>    {/*函数表达式*/}
            {/*增强函数表达式：若user为空，则返回‘用户信息为空’，代替if条件*/}
            <p>{ chooseuserinfo(userinfo) }</p>
            <p>{ chooseuserinfo() }</p>   
            <div>{ arr }</div>   {/*数组表达式*/}
            <p style={ styles.css1 }>改变样式1</p>   {/*样式表达式*/}
            <p style={ styles.css2 }>改变样式2</p>
        </span>
    )
    ReactDOM.render(ReactP,reactDiv)
</script>

注意：引入script文件时的type属性：<script type="text/babel">

码农公寓