React框架简介、基本使⽤、jsx的理解和使⽤React的基本认识
Facebook开源的⼀个js库，结合⽣态库构成⼀个MV＊框架，⼀个⽤来动态构建⽤户界⾯的js库
React⽣态：React+React-Router+Redux+Axios+Babel+Webpack
，
React的特点
Declarative(声明式编码)
Component-Based(组件化编码)
Learn Once, Write Anywhere(⽀持客户端与服务器渲染)
⾼效（⾼效的DOM Diff算法，最⼩化页⾯重绘）
单向数据流（⽗组件只能将数据⼀层逐步往⼦组件传递，⼦组件向⽗组件也是只能⼀层层的往传递数据）
声明式编程：只关注做什么, ⽽不关注怎么做(流程), 类似于填空题，命令式编程：要关注做什么和怎么做(流程), 类似于问答题
React⾼效的原因
虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数)
⾼效的DOM Diff算法, 最⼩化页⾯重绘(减⼩页⾯更新的区域)
React的基本使⽤
需求：在⼀个div容器内插⼊⼀个元素，效果如下：
导⼊相关js库⽂件(react.js（核⼼库）, react-dom.js（提供操作DOM的react扩展库）, babel.min.js（解析JSX语法代码转为纯JS语法代码的库）)
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
具体代码
<title>01_HelloWorld</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*告诉babel.js解析⾥⾯的jsx的代码*/
// 1. 创建虚拟DOM元素对象
var vDom = <h1>Hello React!</h1>  // 不是字符串
// 2. 将虚拟DOM渲染到页⾯真实DOM容器中
</script>
</body>
</html>
安装React Devtools调试⼯具
直接在Chrome浏览器的应⽤商店中搜索下载安装即可
虚拟DOM
React提供了⼀些API来创建⼀种 `特别` 的⼀般js对象，纯JS(⼀般不⽤)
var element = ateElement('h1', {id:'myTitle'},'hello')
上⾯创建的就是⼀个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化⽽更新界⾯
<title>02_JSX_DEMO</title>
</head>
<body>
<h2>前端JS框架列表</h2>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript">
// 使⽤React提供了⼀些API来创建虚拟DOM，没有使⽤JSX语法的话，可以直接使⽤type="text/javascript"，不⽤写成bable
const msg = 'I Like You!'
const myId = 'Atguigu'
// 1.创建虚拟DOM对象
// 第⼀个参数是标签名，第⼆个参数是是标签的属性, 第三个参数是标签⾥的内容
const vDom1 = ateElement('h1', {id: LowerCase()}, UpperCase())
//渲染虚拟DOM
// 第⼀个参数是虚拟DOM对象，第⼆个参数是需要插⼊的真实DOM元素
</script>
</body>
</html>
JSX的理解和使⽤
全称: JavaScript XML，react定义的⼀种类似于XML的JS扩展语法: XML+JS，作⽤：是⽤来创建react虚拟DOM(元素)对象标签名任意: HTML标签或其它标签 标签属性任意: HTML标签属性或其它
var ele = <h1>Hello JSX!</h1>
//注意1: 它不是字符串, 也不是HTML/XML标签
// 注意2: 它最终产⽣的就是⼀个JS对象
JSX基本语法规则
遇到 <；开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须⽤{ }包含
渲染虚拟DOM(元素)
语法: der(virtualDOM, containerDOM)
作⽤: 将虚拟DOM元素渲染到页⾯中的真实容器DOM中显⽰
参数说明  参数⼀: 纯js或jsx创建的虚拟dom对象，参数⼆: ⽤来包含虚拟DOM元素的真实dom元素对象(⼀般是⼀个div)
jquery框架定义
babel.js的作⽤
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运⾏只要⽤了JSX，都要加上type="text/babel", 声明需要babel来处理
需求是在两个div上插⼊元素，效果如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。