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>
                    &

posted @ 2022-01-05 10:44 JackieDYH 阅读(33) 评论(0) 收藏举报来源

刷新页面返回顶部

JackieDYH

React学习笔记--进阶之路

react框架 *

使用注意事项-jsx语法

React常见错误

React优缺点

使用-起步

单页面

jsx的使用

jsx基本使用

数据类型解析

属性绑定

条件判断

列表循环

公告