首页 > 其他分享> 文章详细

React 虚拟DOM及JSX总结

2021-03-20 11:57:28 阅读：143 来源： 互联网

标签：react DOM app React user JSX

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">

标签：react,DOM,app,React,user,JSX
来源： https://blog.csdn.net/isfor_you/article/details/115022366

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。