React(1)—— React简介、JSX语法、虚拟DOM

文章目录


1.React简介

1.1 React是什么?

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

  1. 发送请求获取数据
  2. 处理数据(过滤,整理格式等)
  3. 操作DOM呈现页面(React做的事情)

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

1.2 原生JS的缺点

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

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

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

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

  • 模块
  1. 理解:向外提供特定功能的js程序, 一般就是一个js文件
  2. 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
  3. 作用:复用js, 简化js的编写, 提高js运行效率
  • 组件
  1. 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  2. 为什么要用组件: 一个界面的功能更复杂
  3. 作用:复用编码, 简化项目编码, 提高运行效率

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

1.3 React的优势

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

1.4 React高效的原因

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

2.JSX语法

2.1 JSX简介

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

2.2 JSX的使用规范

  1. 样式类名调用时,不要用class,而是用className
<h1 className = 'color'>    
   Hello World!     
</h1> 
  1. 标签中混入JS“表达式”时要用 { }
const myData = 'HeLlo rEaCt'
<h1 className = 'color'>    
  <span> {myData} </span>     
</h1> 
  1. 内联样式,要用style = {{ }} 并且value要用“驼峰写法”
const myData = 'HeLlo rEaCt'
<h1 className = 'color'>    
  <span style = {{color:'white'}}>{myData}</span>    
</h1> 
  1. jsx要求: 不能多有个根标签,根标签只能有一个 例如:本案例只能有一个< h1>,解决办法 在外面包裹一层div标签或者<> </>
  2. 标签必须闭合, 例如: < input type=“text”> 不可以这么写, 得写成: < input type=“text”/> (可自结束)

3.虚拟DOM

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

  1. 本质是Object类型的对象 (一般对象)
  2. 虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性
  3. 虚拟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>
上一篇:Hello React


下一篇:【react学习】使用jsx