React学习笔记--进阶之路
react框架 *
react是facebook内部的一个javascript类库，用于构建用户界面的 JavaScript 库
react官网：https://react.docschina.org/
react不是一个完整的MVC框架，最多可以认为是MVC中的V（View）
react引入了虚拟DOM机制
react引入了组件化思想
react使用facebook专门为其开发的一套语法糖--jsx
使用注意事项-jsx语法
注意事项 jsx语法
* 标签内容内属性 例如
* 1 类名 class 和 js class冲突 ==> className
* 2 for ==>htmlFor
* 只能有一个根标签
* 语法要求必须是闭合标签 例如 单标签<imput /> 手动添加 / 闭合
* 注释 {/* 内容 */}
* 遇到 < 解析成 html代码 遇到 { 解析成js代码
* 使用js变量 用 { 变量 }
* 属性绑定 去除后面引号 src=变量React常见错误
①Uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag
虚拟DOM中只能有一个根标签②Warning: Invalid DOM property `class`. Did you mean `className`?
in div
在react的jsx语法中，class是一个类的关键词，所以标签的class属性要改为className③Uncaught SyntaxError: Inline Babel script: Unterminated JSX contents
在jsx中，所有的标签都要有闭合，比如input br img hr 要写成`<input /> <br />`④Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
in label
in div
在react的jsx语法中，for是循环的关键词，所以标签的for属性要改为htmlFor
<div id="box"></div>
<script type="text/babel">
let el = <div className="container">
<h1>标题1</h1><h2>标题2</h2>
<label htmlFor="name">用户名：</label>
<input id="name" type="text" placeholder="请输入用户名" />
</div>
ReactDOM.render(el,document.getElementById('box'))
</script>React优缺点
优点：
react运行速度快
跨浏览器兼容
一切皆组件
单向数据流
语法报错提示非常清晰
缺点：
react不适合做一个完整的框架使用，react本身只是一个视图而已
使用-起步
单页面
第一步：引入react核心库
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<!-- react核心库 dom核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
第二步：设置一个挂载点
<body>
<div id="box"></div>
</body>
第三步：渲染虚拟DOM到挂载点
<script>
// 写法一 不方便
// let app = document.querySelector('#app');
// // 创建虚拟Dom
// let h1 = React.createElement('h1', { id: 'myh1' }, 'hhh')
// ReactDOM.render(h1, app)
ReactDOM.render(
React.createElement('h1',{id:'myh1'},
'这是一个虚拟dom-h1'),document.querySelector('#box')
)
</script>React中的createElement方法用来创建一个虚拟DOM的函数
这个函数支持三个参数：
1. 要创建的标签名称（只能是系统内置的标签）
2. 要创建的标签的属性（支持内置属性和自定义属性）
3. 标签的内容ReactDOM中的render方法用来渲染虚拟DOM到真实DOM中的函数
这个函数支持三个参数：
1. 要渲染的虚拟DOM元素
2. 要渲染的位置
3. 回调函数（一般不使用）
jsx的使用
如果要在页面结构中创建一个层级比较深的虚拟DOM结构的话，代码如下：
ReactDOM.render(
React.createElement('div',null,
React.createElement('h1',{id:'myh1'},'这是一个h1标题'),
React.createElement('p',null,
React.createElement('a',{},
React.createElement('span',{},'')
)
)
),
document.getElementById('box')
)如果虚拟DOM层级比较深/复杂，使用createElement方法就不合适了，所以要使用jsx。
jsx是Javascript和XML的结合，是facebook为react框架开发的一套语法糖
语法糖又叫糖衣语法，是指计算机中添加的某种语法，这种语法对语言的功能并没有影响，而是更加方便程序员使用。
jsx是一种javascript语法的扩展，==>允许js和html进行混写。
jsx基本使用
1、引入babel核心库文件
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>2、修改script的type属性
<script type="text/babel"></script>3、创建虚拟DOM
let el = <div id="smallbox">
<h1>标题</h1>
<p>段落</p>
<a href="#">小豪</a>
</div>4、渲染虚拟DOM到挂载点
ReactDOM.render(el,document.getElementById('box'))注意：创建组件时使用把.js扩展名,改用.jsx，会有语法提示
数据类型解析
react的jsx语法中，当遇到<就会解析成html语法，当遇到{就会解析成js语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx解析数据类型</title>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let name = '小飞'
let islogin = false//布尔值不要直接进行输出，可以做判断使用
let obj = { name : '中公优就业' }//对象不要直接输出，可以读取对象中的某个key属性
//数组元素如果是非对象类型，可以直接输出，但是对象不能直接输出
let arr = [
{
name : '小飞',
age:18
},
{
name : '小李',
age:19
}
]
function randomStr(){
return Math.random()
}
let el = (
<div>
{ /* 字符串 */ }
<p>姓名：{ name }</p>
{ /* 数字 */ }
<p>{ 100 * 90 }</p>
{/* 布尔值 */}
<p> { islogin ? '已登录' : '未登录' } </p>
{/* 对象 */}
<p>{ obj.name }</p>
{/* 数组 */}
<p>{ /*arr*/ }</p>
{ /* 函数 */ }
<p> { randomStr() } </p>
</div>
)
let app = document.querySelector('#app')
ReactDOM.render(el,app)
</script>
</body>
</html>属性绑定
{ /* 属性绑定 */ }
<p style={
{ color:'#f00',fontSize:30 }}> { randomStr() } </p>
<img src={img} />条件判断
//条件判断
let btn = (function(){
if(islogin){
return <a className="login1" href="#">已登录</a>
}else{
return <a className="login2" href="http://www.ujiuye.com">请登录</a>
}
})()
let el = (
<div>
{btn}
</div>
)列表循环
let arr = [
{
name : '小飞',
age:18
},
{
name : '小李',
age:19
}
]
let el = (
<div>
<ul>
{
arr.map((item,index)=>{
return (
<li key={ index }>
<p>姓名：{ item.name }</p>
&本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17633990.html
