一、React简介
1. 框架定义
- React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目。
2. react可以解决的问题
3. react特点
4.React高效的原因
- 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
- DOM Diffing算法, 最小化页面重绘。
原生JavaScript实现数据渲染（每次渲染从头开始，往100条数据里面添加一条就得重新渲染101条）
React实现数据渲染（与原来的数据进行比较，把新增数据渲染到页面）
二、React基本使用
1. 相关js库
//1.react.js：React核心库。
<script type="text/javascript" src="../js/react.development.js"></script>
//2.react-dom.js：提供操作DOM的react扩展库。
<script type="text/javascript" src="../js/react-dom.development.js"></script>
//3.babel.min.js：解析JSX语法代码转为JS代码的库。
<script type="text/javascript" src="../js/babel.min.js"></script>
-
babel的作用：
- 将ES6语法转译成浏览器兼容的ES5语法规范
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2. 创建虚拟DOM
2.1通过js创建DOM
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<script type="text/javascript">
//1.创建虚拟DOM
const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
2.2通过jsx创建DOM🔥
- 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理。
最终效果：
3. 虚拟DOM与真实DOM
- React提供了一些API来创建虚拟DOM。
- 虚拟DOM对象最终都会被React转换为真实的DOM（否则毫无意义）
- 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新。
创建虚拟DOM的语法：
//1.创建虚拟DOM
const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
三、React JSX
全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是
React.createElement(component, props, ...children)方法的语法糖作用: 用来简化创建虚拟DOM
写法：var ele =<h1>Hello JSX</h1>
注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象
1. JSX的基本语法+示例
jsx语法规则：
1.定义虚拟DOM时，不要写引号，渲染不出来。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签(一个大标签里面多个小标签)
6.标签必须闭合（标签没有内容可以自结束“<input type="text"/>”）
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
2.渲染虚拟DOM(元素)
- 渲染虚拟DOM的语法：
ReactDOM.render(virtualDOM(虚拟dom), containerDOM(真实dom))
- 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
- 参数说明
- 参数一: 纯js或jsx创建的虚拟dom对象
- 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
3. JSX练习
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" >
/*
一定注意区分：【js语句(代码)】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
*/
//模拟一些数据
const data = ['Angular','React','Vue']
//1.创建虚拟DOM
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
网友评论