React 虚拟DOM及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安装
  1. 通过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">

上一篇:除非提供了‘--jsx‘标志,否则无法使用JSX


下一篇:JSX 和虚拟 DOM