这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
用于动态构建用户界面的 JavaScript 库(只关注于视图) 由Facebook开源
React的特点
-
声明式编码
-
组件化编码
-
React Native 编写原生应用
-
高效（优秀的Diffing算法）
使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。
相关js库
\1. react.js：React核心库。
\2. react-dom.js：提供操作DOM的react扩展库。
\3. babel.min.js：解析JSX语法代码转为JS代码的库。
虚拟DOM与真实DOM
const VDOM = React.createElement('xx',{id:'xx'},'xx')
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。
React JSX
全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + 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)
