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

React（1）—— React简介、JSX语法、虚拟DOM

2021-12-01 21:59:25 阅读：156 来源： 互联网

标签：DOM js React 虚拟 null JSX

文章目录

1.React简介
2.JSX语法
- 2.1 JSX简介
- 2.2 JSX的使用规范
3.虚拟DOM
- 3.1 虚拟DOM是什么？其本质是？
- 3.2 代码展示

1.React简介

1.1 React是什么？

用于动态构建用户界面的 JavaScript 库(只关注于视图)

发送请求获取数据
处理数据（过滤，整理格式等）
操作DOM呈现页面（React做的事情）

React是一个将数据渲染为HTML视图的开源JavaScript库

1.2 原生JS的缺点

原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
原生JavaScript没有组件化编码方案，代码复用率很低

【补充】什么是浏览器重绘重排？

重绘(repaint)：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘
重排(reflow)：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排

【补充】什么是模块化？什么是组件化？

模块

理解：向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率

组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化：当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

1.3 React的优势

采用组件化模式、声明式编码，提高开发效率及组件复用率
在 React Native中可以使用React语法进行移动端开发
使用虚拟DOM+Diff算法，尽量减少与真实DOM的交互

1.4 React高效的原因

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。

2.JSX语法

2.1 JSX简介

全称: JavaScript XML
React定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
作用: 用来简化创建虚拟DOM
React 使用 JSX 来替代常规的 JavaScript。使用 JSX 编写模板更加简单快速，大大提升了编程效率

2.2 JSX的使用规范

样式类名调用时，不要用class，而是用className

<h1 className = 'color'>    
   Hello World!     
</h1>

标签中混入JS“表达式”时要用 { }

const myData = 'HeLlo rEaCt'
<h1 className = 'color'>    
  <span> {myData} </span>     
</h1>

内联样式，要用style = {{ }} 并且value要用“驼峰写法”

const myData = 'HeLlo rEaCt'
<h1 className = 'color'>    
  <span style = {{color:'white'}}>{myData}</span>    
</h1>

jsx要求：不能多有个根标签，根标签只能有一个例如：本案例只能有一个< h1>,解决办法在外面包裹一层div标签或者<> </>
标签必须闭合，例如： < input type=“text”> 不可以这么写，得写成： < input type=“text”/> （可自结束）

3.虚拟DOM

3.1 虚拟DOM是什么？其本质是？

本质是Object类型的对象（一般对象）
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

3.2 代码展示

通过一下代码案例可对比真实DOM和虚拟DOM的区别

script src="./react库/旧版本/react.development.js"></script>

<script src="./react库/旧版本/react-dom.development.js"></script>

<script src="./react库/旧版本/babel.min.js"></script>

<script type="text/babel">
    const VDOM = <h1>hellow,React</h1>    // 虚拟DOM
    ReactDOM.render(VDOM, document.getElementById('div'))

    const TDOM = document.getElementById('div1')	// 真实DOM
    console.log('虚拟DOM', VDOM);  
    // （轻）       
    /*$$typeof: Symbol(react.element)
    key: null
    props: {children: 'hellow,React'}
    ref: null
    type: "h1"
    _owner: null
    _store: {validated: false}
    _self: null
    _source: null
    [[Prototype]]: Object*/

    console.log('真实DOM', TDOM);
    // (重)
    /*accessKey: ""
    align: ""
    ariaAtomic: null
    ariaAutoComplete: null
    ariaBusy: null
    ariaChecked: null
    ariaColCount: null
    ariaColIndex: null
    ariaColSpan: null
    ariaCurrent: null
    ariaDescription: null
    ariaDisabled: null
    ariaExpanded: null
    ariaHasPopup: null
    ariaHidden: null
    ariaKeyShortcuts: null
    ariaLabel: null
    ariaLevel: null
    ariaLive: null
    ariaModal: null
    ariaMultiLine: null
    ariaMultiSelectable: null
    ariaOrientation: null
    ariaPlaceholder: null
    ariaPosInSet: null
    ariaPressed: null
    ariaReadOnly: null
    ariaRelevant: null
    ariaRequired: null
    ariaRoleDescription: null
    ariaRowCount: null
    ariaRowIndex: null
    ariaRowSpan: null
    ariaSelected: null
    ariaSetSize: null
    onpointerenter: null
    等等...............*/    
</script>

标签：DOM,js,React,虚拟,null,JSX
来源： https://blog.csdn.net/weixin_60297362/article/details/121664926

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

ICode9