React -- 概述虚拟DOMJSX组件与模块

Posted 我真的爱敲代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React -- 概述虚拟DOMJSX组件与模块相关的知识，希望对你有一定的参考价值。

欢迎学习交流！！！
持续更新中…

文章目录

React 介绍

  • React 是一个用于构建用户界面的渐进式 javascript 库，旨在简化可视化页面开发
    • 本身只处理 UI
    • 不关系路由
    • 不处理 ajax
  • React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
    • 数据驱动视图
  • React 由 Facebook 在2013年发布的
  • 第一个真正意义上把组件化思想带到前端开发领域
    • angular 早期没有组件化思想
    • 后来也被 Vue 学习借鉴了
  • 基于JSX的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写
  • React核心是组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。组件将数据和逻辑进行封装

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

  • 数据驱动视图
  • 组件化
  • 路由

React 特点

  • 组件化
  • 高效
    • 虚拟 DOM
    • Vue 2 也是虚拟 DOM
    • 虚拟 DOM 更高效
  • 灵活
    • 渐进式，本身只处理 UI ，可以和其它技术栈组合到一起来使用
  • 声明（配置）式设计
    • data 响应式数据
    • mathods 处理函数
    • state
    • 方法就是类成员
    • 也有特定的组件生命钩子
  • JSX
    • 一种预编译 JavaScript 语言，允许让 JavaScript 和 HTML 混搭
    • 模板中就是 JavaScript 逻辑
  • 单向数据流
    • 组件传值
    • 所有数据都是单向的，组件传递的数据都是单向
    • Vue 也是单向数据流
    • 没有双向数据绑定

相关js库

  1. react.js：React核心库。
  2. react-dom.js：提供操作DOM的react扩展库。
  3. babel.min.js：解析JSX语法代码转为JS代码的库。

React 的发展历史

  • Facebook 内部用来开发 Instagram
  • 2013 年开源了 React
  • 随后发布了 React Native
  • React - Releases
  • 2013 年 7 月 3 日 v0.3.0
  • 2016 年 3 月 30 日 v0.14.8
  • 2016 年 4 月 9 日 v15.0.0
  • 2017 年 9 月 27 日 v16.0.0
  • 截止到目前：2017 年 11 月 29 日 v16.2.0

React 与 Vue 的对比

技术层面

  • Vue 生产力更高（更少的代码实现更强劲的功能）
  • React 更 hack 技术占比比较重
  • 两个框架的效率都采用了虚拟 DOM
    • 性能都差不多
  • 组件化
    • Vue 支持
    • React 支持
  • 数据绑定
    • 都支持数据驱动视图
    • Vue 支持表单控件双向数据绑定
    • React 不支持双向数据绑定
  • 它们的核心库都很小，都是渐进式 JavaScript 库
  • React 采用 JSX 语法来编写组件
  • Vue 采用单文件组件
    • template
    • script
    • style

开发团队

  • React 由 Facebook 前端维护开发
  • Vue
    • 早期只有尤雨溪一个人
    • 由于后来使用者越来越多，后来离职专职开发维护
    • 目前也有一个小团队在开发维护

相关资源链接

React虚拟DOM

React框架的核心优势之一， 就是支持创建虚拟DOM来提高页面性能。其实， 虚拟DOM这个概念很早就被提出来了， 是相对于实际DOM而言的。

设计人员在设计传统HTML网页的UI时， 都会在页面中定义若干的DOM元素， 这些DOM元素是所谓的实际DOM。通常， 页面中的实际DOM负责承载着外观表现和数据变化，任何外观形式的改变或数据信息的更新都要反馈到UI上， 都是需要通过操作实际DOM来实现的。

对于复杂的页面UI而言， 往往会定义大量的实际DOM。频繁地操作大量实际DOM， 往往会带来访问性能的严重下降， 用户体验也会随之变差， 这些都是设计人员所不希望看到的。因此， React框架专门针对这个现象引入了虚拟DOM机制，以避免频繁的DOM操作带来的性能下降问题。

React DOM类似于一种将相关的实际DOM组合在一起的集合， 是有区别于传统概念上的DOM元素的，如果将其理解为DOM组件应该更为贴切。因此，React框架将ReactDOM称为虚拟DOM

创建虚拟DOM的两种方式

  1. 纯JS方式（基本不用）
<div id="test"></div>
//引入react核心库和react-dom

//1. 创建虚拟DOM
//const VDOM = React.createElement(标签名,标签属性,标签内容)
const VDOM = React.createElement('h1',{id:'title'},'Hello React)
//2. 渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
  1. JSX方式
//1. 创建虚拟DOM
const VDOM = <h1 id="title"><span>Hello React</span></h1>     //不能写引号，因为不是字符串
//或者缩进格式
const VDOM = (
	<h1 id="title">
		<span>Hello React</span>
	</h1>
)
//2. 渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))


虚拟DOM和真实DOM

  1. React提供了一些API来创建的一般js对象
    const VDOM = React.createElement('xx',{id:'xx'},'xx')
    上述创建的就是一个简单的虚拟DOM对象
  2. 虚拟DOM对象最终都会被React转换为真实的DOM呈现在页面上
  3. 编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化。
  4. 虚拟DOM本质是Object类型的对象（一般对象），且虚拟DOM属性比真实DOM少，因为虚拟DOM是React内部在使用，无需真实DOM上的诸多属性

React JSX

效果：

  • 全称: JavaScript XML，是react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
  • XML早期用于存储和传输数据（微信公众号和开发者之间使用就是XML方式），后来用JSON方式存储数据
//XML方式存储
<student>
	<name>ZhangSan</name>
	<age>17</age>
</Student>
//JSON方式存储
"{"name":"ZhangSan","age":17}"
  • XML作用: 用来简化创建虚拟DOM
    • 写法：var ele = <h1>Hello JSX!</h1>
    • 注意1：它不是字符串, 也不是HTML/XML标签
      注意2：它最终产生的就是一个JS对象
  • 标签名任意: HTML标签或其它标签
  • 标签属性任意: HTML标签属性或其它
  • 基本语法规则
    1. 遇到 < 开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    2. 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
  • babel.js的作用
    1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

渲染虚拟DOM（元素）

  1. 语法: ReactDOM.render(virtualDOM, containerDOM)

  2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

  3. 参数说明

    参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

组件与模块

模块

模块：向外提供特定功能的js程序, 一般就是一个js文件

  • 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
  • 作用：复用js, 简化js的编写, 提高js运行效率

组件

组件：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)

  • 为什么要用组件： 一个界面的功能更复杂
  • 作用：复用编码, 简化项目编码, 提高运行效率

组件规则注意事项：

  • 组件类的第一个首字母必须大写
  • 组件类必须有 render 方法
  • 组件类必须有且只有一个根节点
  • 组件属性可以在组件的 props 获取
    • 函数需要声明参数：props
    • 类直接通过 this.props

模块化与组件化

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

以上是关于React -- 概述虚拟DOMJSX组件与模块的主要内容，如果未能解决你的问题，请参考以下文章

ReactReact全家桶React 概述+虚拟DOM的创建与渲染+JSX

ReactReact全家桶React 概述+虚拟DOM的创建与渲染+JSX

前端知识点回顾——Reactjs

React概述JSX语法虚拟DOM及React组件

React概述JSX语法虚拟DOM及React组件

React 介绍及实践教程