React -- 概述、虚拟DOM、JSX、组件与模块

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


React 介绍

  • React 是一个用于构建用户界面的渐进式 JavaScript 库,旨在简化可视化页面开发
    • 本身只处理 UI
    • 不关系路由
    • 不处理 ajax
  • React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
    • 数据驱动视图
  • React 由 Facebook2013年发布的
  • 第一个真正意义上把组件化思想带到前端开发领域
    • 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都以模块来编写的, 这个应用就是一个模块化的应用
  • 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值