React 基础

最新推荐文章于 2024-09-17 12:04:49 发布

IAN27

最新推荐文章于 2024-09-17 12:04:49 发布

阅读量109

点赞数

分类专栏： react 文章标签： js react

本文链接：https://blog.csdn.net/IAN27/article/details/115539872

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. js与jsx创建虚拟DOM

1> 使用jsx创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <title>1_使用jsx创建虚拟DOM</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"> /* 此处一定要写babel，因为用的是jsx，由babel转译*/
// 1.创建虚拟DOM
    const VDOM = <h1 id="title"><span>Hello,React</span></h1> /* 此处不要写引号，因为是jsx，与js不同*/
// 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>

</body>
</html>

2> 使用js创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <title>2_使用js创建虚拟DOM</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/javascript">   

//1.创建虚拟DOM 
// const VDOM = React.createElement('标签名','标签属性','标签内容') 
    const VDOM = (React.createElement('h1',{id:'title'},'Hello,React'))
//2.渲染虚拟DOM到页面 
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>

</body>
</html>

3> 两者的差异
在脚本标签处，jsx使用的是<script type="text/babel">,因为要使用babel转译。
在创建虚拟DOM时，js
const VDOM = (React.createElement('h1',{id:'title'},'Hello,React'))
而jsx简化了许多
const VDOM = <h1 id="title"><span>Hello,React</span></h1>

2.虚拟DOM与真实DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>3_虚拟DOM与真实DOM</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<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，因为用的是jsx，由babel转译*/
// 1.创建虚拟DOM
    const VDOM = 
    (<h1>
        <span>Hello,React</span>
            </h1>) /* 此处不要写引号，因为是jsx，与js不同*/
// 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))

    const TDOM = document.getElementById('demo')

    console.log('虚拟DOM',VDOM);
    console.log('真实DOM',TDOM);

    debugger;
    console.log(typeof VDOM);
    console.log(VDOM instanceof Object);

</script>

</body>
</html>

在这里插入图片描述
关于虚拟DOM：

        1.本质是Object类型的对象（一般对象）
        2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
        3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

3. jsx语法规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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"> /* 此处一定要写babel，因为用的是jsx，由babel转译*/
const myId = 'aTgUiGu'
const myData = 'HeLlo,rEaCt'

// 1. 创建虚拟DOM
const VDOM = (
    <div>
    <h2 className="title" id={myId.toLowerCase()}>
    <span style={{color:"white" ,fontSize:'40px'}}>{myData.toLocaleLowerCase()}</span>
    </h2>
    <h2 className="title" id={myId.toUpperCase()}>
    <span style={{color:"white" ,fontSize:'40px'}}>{myData.toLocaleLowerCase()}</span>
    </h2>
    <input type="text"/> 
    </div>
)

// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))


</script>

</body>
</html>

jsx语法规则：

    1.定义虚拟DOM时，不要写引号。
    2.标签中混入JS表达式时要使用{}。
    3.样式的类名指定不要用class，要用className。
    4.内联样式，要用style={{key:value}}的形式去写。
    5.只有一个根标签。
    6.标签必须闭合。
    7.标签首字母
        1）若小写字母开头，则将该标签转为HTML中的同名元素，如`<span>，<h1>`等。若HTML中无该标签对应等同名元素，则报错。
        2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

4.JS语句与JS表达式的区别

一定注意区分：【JS语句(代码)与【JS表达式】】

        1.表达式：一个表达式会产生一个值，可以放在任何一个需要值到地方 
            下面这些都是表达式： 
            （1）a 
            （2）a+b 
            （3）demo(1) 
            （4）arr.map(1) 
            （5）function test(){} 
        2.语句(代码) 
            下面这些都是语句(代码) 
             (1)if(){} 
            （2）for(){} 
            （3）switch(){case:xxxx}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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">
        
        // 模拟一些数据 
        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>

</html>