React简介
官网
-
英文官网: reactjs.org/
-
中文官网: react.docschina.org/
介绍描述
-
用于动态构建用户界面的 JavaScript 库(只关注于视图)
-
由Facebook开源
React的特点
-
声明式编码
-
组件化编码
-
React Native 编写原生应用
-
高效（优秀的Diffing算法）
React高效的原因
-
使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
-
DOM Diffing算法, 最小化页面重绘。
React的基本使用
效果
编辑
相关js库
-
react.js：React核心库。
-
react-dom.js：提供操作DOM的react扩展库。
-
babel.min.js：解析JSX语法代码转为JS代码的库。
创建虚拟DOM的两种方式
编辑
-
纯JS方式(一般不用)
-
JSX方式
虚拟DOM与真实DOM
- React提供了一些API来创建一种 “特别” 的一般js对象
l const VDOM = React.createElement('xx',{id:'xx'},'xx')
l 上面创建的就是一个简单的虚拟DOM对象
-
虚拟DOM对象最终都会被React转换为真实的DOM
-
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界_web前端培训。
React JSX
效果
编辑
JSX
-
全称: JavaScript XML
-
react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children) 方法的语法糖
-
作用: 用来简化创建虚拟DOM
-
写法：var ele =
Hello JSX!
-
注意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)
JSX练习
需求: 动态展示如下列表
编辑
模块与组件、模块化与组件化的理解
模块
-
理解：向外提供特定功能的js程序, 一般就是一个js文件
-
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
-
作用：复用js, 简化js的编写, 提高js运行效率
组件
-
理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
-
为什么要用组件： 一个界面的功能更复杂
-
作用：复用编码, 简化项目编码, 提高运行效率
模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
编辑
