欢迎学习交流!!!
持续更新中…
文章目录
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库
react.js
:React核心库。react-dom.js
:提供操作DOM的react扩展库。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 官网
- 官方教程
- 连字游戏
- 官方文档
- 基础教程
- 高级教程
- API 参考文档
- React - GitHub
- 阮一峰 - React 技术栈系列教程
- 阮一峰 - React 入门实例教程
- awesome react
- awesome-react-components
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的两种方式
- 纯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'))
- 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
- React提供了一些API来创建的一般js对象
const VDOM = React.createElement('xx',{id:'xx'},'xx')
上述创建的就是一个简单的虚拟DOM对象 - 虚拟DOM对象最终都会被React转换为真实的DOM呈现在页面上
- 编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化。
- 虚拟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标签属性或其它
- 基本语法规则
- 遇到 < 开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含
- babel.js的作用
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX,都要加上
type="text/babel"
, 声明需要babel来处理
渲染虚拟DOM(元素)
-
语法:
ReactDOM.render(virtualDOM, containerDOM)
-
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
-
参数说明
参数一: 纯js或jsx创建的虚拟dom对象 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
组件与模块
模块
模块:向外提供特定功能的js程序, 一般就是一个js文件
- 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
- 作用:复用js, 简化js的编写, 提高js运行效率
组件
组件:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
- 为什么要用组件: 一个界面的功能更复杂
- 作用:复用编码, 简化项目编码, 提高运行效率
组件规则注意事项:
- 组件类的第一个首字母必须大写
- 组件类必须有
render
方法 - 组件类必须有且只有一个根节点
- 组件属性可以在组件的
props
获取- 函数需要声明参数:
props
- 类直接通过
this.props
- 函数需要声明参数:
模块化与组件化
- 模块化:当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
- 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用