react官方文档：React 官方中文文档 – 用于构建用户界面的 JavaScript 库
1. react
用于动态构建用户界面的JavaScript库，将数据渲染为HTML视图的开源JS库
2. react高效的原因：
1.react使用虚拟DOM，不总是直接操作页面真实DOM(原生JS直接操作DOM，浏览器hi进行大量的重排重绘)
2. react的DOM Diffing算法，最小化页面重绘(原生JS操作DOM繁琐且效率低)
3.原生JS没有组件化编码方案，代码复用率低
3. react核心库：
react.js：React核心库；react-dom.js：提供操作DOM的react扩展库；bable.min.js：解析JSX语法大妈们转为JS代码的库；prop-type.js
<!-- 准备好一个“容器” -->
<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" > /* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
//2.渲染虚拟DOM到页面
//参数一：虚拟DOM,参数二：容器
ReactDOM.render(VDOM,document.getElementById('test'))
</script>4. 两种创建虚拟DOM方式
使用JS创建虚拟DOM和JSX创建虚拟DOM
1.JS创建虚拟DOM
<!-- 准备好一个“容器” -->
<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" > /* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>2.JSX创建虚拟DOM
<!-- 准备好一个“容器” -->
<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>
<!-- 由于要使用JS语法创建虚拟DOM所以就不需要引入babel了 -->
<script type="text/javascript" >
//1.创建虚拟DOM，想要创建多层标签的话就需要在每层的React.createElement中第三个参数创建，非常麻烦
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>5. 虚拟DOM
虚拟DOM会被react转化为真实DOM,编码时只需操作真实DOM即可
简单创建虚拟DOM
const VDOM = React.createElement('xx',{id:'xx'},'xx')例：
<!-- 准备好一个“容器” -->
<div id="test"></div>
<div id="demo"></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" > /* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
const TDOM = document.getElementById('demo')
console.log('虚拟DOM',VDOM);
console.log('真实DOM',TDOM);
//由于在浏览器中打印真实DOM时会被展示成html标签并看不到当前真实DOM中的各种属性，所以可以使用debug模式，这样再次运行时在浏览器中将鼠标放到TDOM上就可以看到很多属性，而虚拟DOM中的属性就要少很多了
debugger;
// console.log(typeof VDOM);
// console.log(VDOM instanceof Object);
/*
关于虚拟DOM：
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
*/
</script>6. React JSX简化创建虚拟DOM
var ele = <h1> HELLO</lh1>
1.基本语法：
1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2) 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
2.添加bable.js库
1) 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2) 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
JSX语法规则：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx语法规则</title>
<style>
.title{
background-color: orange;
width: 200px;
}
</style>
</head>
<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" >
const myId = 'aTgUiGu'
const myData = 'HeLlo,rEaCt'
//1.创建虚拟DOM
const VDOM = (
<div>
<h2 className="title" id={myId.toLowerCase()}>
<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
</h2>
<h2 className="title" id={myId.toUpperCase()}>
<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
</h2>
<input type="text"/>
<!-- 这里就会报错，因为html中没有对应的标签 -->
<good>123</good>
<!-- 如果首字母是大写的话，React会认为是组件，如果没有这个组件会报Good is not default -->
<Good></Good>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
/*
jsx语法规则：
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。第一层大括号代表要在里面写js表达式，第二层代 表里面写的不是函数、数组之类的而是对象
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素， 则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
*/
</script>
</body>
</html>渲染虚拟DOM元素：
ReactDOM.render(虚拟DOM，真实DOM)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx小练习</title>
</head>
<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() map方法的作用是将一个数组进行加工，例如：
let arr = [1,3,5,7,9];
let res = arr.map((item)=>{
return item+1
})
如果输出res，会发现所有的元素都加1了，2,4,6,8,10
(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>
<!-- 如果直接这样写可以发现React能够直接遍历数组，但是想要的是将数组的内容都包含在一个li标签 ，还要注意如果data是对象就不能遍历了-->
<!-- {data} -->
<!-- 但是在jsx中不能写for循环去遍历，也就是说不能直接写js语法代码 ,这样写代码会直接报错，要注意：大括号里面只能写JS表达式-->
<!-- for(var i = 0; i < data.length;i++){
data[i] = <li>data[i]</li>
} -->
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
扫一扫
803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
