React学习（二）

qq_52551375

已于 2024-01-23 23:34:25 修改

阅读量394

点赞数 9

文章标签： react.js 学习前端

于 2024-01-23 18:03:12 首次发布

本文链接：https://blog.csdn.net/qq_52551375/article/details/135776454

版权

本文详细介绍了React学习中的关键概念，包括JSX语法、虚拟DOM的创建与渲染，以及函数式组件和类组件的区别，同时涵盖了组件状态的管理与原生和React事件的绑定方式。

摘要由CSDN通过智能技术生成

React学习（二）

一.JSX（JavaScript XML）语法

1.即JS+XML
XML:早期用于存储和传输数据

<student>
	<name>Tom</name>
	<age>19</age>
</student>

JSON:parse方法:将json字符串解析为js数组和对象
stringfy：将js的数组和对象转成json字符串
“{“name”:Tom,“age”:19}”
2.语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsx语法规则</title>
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id = "test"></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/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: '20px' }}>{myData.toLowerCase()}</span>    
                </h2>
                <h2 className = "title" id = {myID.toLowerCase()}>
                    <span style = {{color: 'white', fontSize: '20px' }}>{myData.toLowerCase()}</span>    
                </h2>
                <input type="text"/>
                // <good>123</good>
            </div>
        )

        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
        /* 
            jsx语法规则：
                1.定义虚拟DOM时，不要加引号。
                2.标签中混入JS表达式时，要用{}
                3.样式的类名指定不要用class,要用className
                4.内联样式要用style = {{key:value}}形式写
                5.虚拟DOM必须只有一个根标签
                6.标签必须闭合
                7.标签首字母
                （1）若为小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
                （2）若为大写字母开头，则react去渲染对应的组件，若组件未定义，则报错

        */
    </script>
</body>
</html>

3.小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"> </div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        // 注意区分js语句（代码），js表达式
        // 1.表达式会产生一个值，可以放在任意一个地方
        // （1）a
        // (2)a+b
        // (3)demo(1)
        // (4)arr.map()
        // (5)fuction test(){}
        // 2.语句：
        // （1）if(){} (2)for(){} (3)switch(){case:}
        const data = ['Aufluar','React','Vue']
        // 创建
        const VDOM = (
            <div>
                <h2>前端js框架</h2>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        }

                        )
                    }
                </ul>    

            </div>
        )
        // 渲染
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

3.组件：复用编码，简化项目编码，提高运行效率
组件化：应用多组件的方式实现，这个应用就是一个组件化的应用
二.React中定义组件

1.函数式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_函数式组件</title>
</head>
<body>
    <div id="test">

    </div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建函数式组件
        function MyComponent() {
            console.log(this);//此处this是undefined，因为babel开启了严格模式
            return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
        }
        // 2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        // 执行了ReactDOM.render(<Mycomponent>.....)之后，发生了什么？
        /*
            1.React解析组件标签，找到了Mycomponent组件
            2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转换为真实DOM，随后呈现在页面
        */
    //    注意：组件首字母大写，函数要有返回值，render中必须写组件标签
    </script>
</body>
</html>

2.复习类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // 创建一个类
        class Person{
            // 构造器方法
            constructor(name,age){
                // 构造器中的this是类的实例对象
                this.name = name
                this.age = age
            }
            // 一般方法
            speak(){
                // speak方法放在类的原型对象上，供实例使用
                // 通过person实例调用speak时，speak中的this就是person实例
                console.log(`我叫${this.name},年龄${this.age}`)
            }
        }
        // 创建一个Person的实例对象
        const p1 = new Person('tom',18)
        const p2 = new Person('jerry',20)
        console.log(p1)
        console.log(p2)
        p1.speak()
        p2.speak()

        // 创建一个Student类，继承Person类
        class Student extends Person{
            constructor(name,age,grade){
                super(name,age)//必须放在第一行
                this.grade = grade
            }
            // 重写从父类继承过来的方法
            speak(){
                console.log(`我叫${this.name},年龄${this.age},年级${this.grade}`)
            }
             // study方法放在类的原型对象上，供实例使用
                // 通过student实例调用study时，study中的this就是student实例
            study(){
                console.log('我很努力学习')
            }
        }
        const s1 = new Student('张',15,'高一')
        console.log(s1)
        s1.speak()
        /*
        总结：
            1.类中的构造器不是必须写的
            2.要对实例进行一些初始化操作时才写，如添加指定属性
            3.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须调用的
            4.类中所定义的方法都是放在类的原型对象上
        */
    </script>
</body>
</html>

3.类式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        // 创建
        class Mycomponent extends React.Component{
            // render是放在类的实例对象(Mycomponent)上，供实例使用
            // render中的this是 Mycomponent的实例对象<=>Mycomponent组件的实例对象
            
            render(){
                console.log("render中的this：",this)
                return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
            }

        }
        // 渲染
        ReactDOM.render(<Mycomponent/>,document.getElementById('test'))
        /*
            ReactDOM.render(<Mycomponent/>...)之后,发生了什么？
            1.React解析组件标签，找到了Mycomponent组件
            2.发现组件是使用类定义的，随后new出来该类的实例调用到原型上的render()方法
            3.该render将返回的虚拟DOM转换为真实DOM，随后呈现在页面
    
        */
    </script>
</body>
</html>

三.组件实例（class定义的组件）的属性
1.state状态
组件状态驱动页面，组件的状态里存放着数据，数据的改变驱动页面的展示
（1）简单组件：无state
（2）复杂组件：有state
下面代码实现了借助构造器初始化状态，以及读出使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        // 创建
        class Weather extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    ishot:false
                }
            }
            render(){console.log(this)
                return <h1>今天天气很{this.state.ishot ? '炎热': '寒冷'}</h1>
            }
        }
        // 渲染
        ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>


</body>
</html>

2.原生事件3种绑定方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button onclick="demo()">按钮3</button>
    <script type = "text/javascript">
        const btn1 = document.getElementById("btn1");
        btn1.addEventListener("click",()=>{
            alert('按钮1被点击了')
        })
        const btn2 = document.getElementById("btn2");
        btn2.onclick = ()=>{
            alert('按钮2被点击了')
        }
        function demo()
        {
            alert('按钮3被点击了')
        }
    </script>
</body>
</html>

3.react中绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        // 创建
        class Weather extends React.Component {
            constructor(props) {
                super(props)
            //初始化状态 
                this.state = {
                    ishot:false
                }
            }
            render(){
                console.log(this)
                // 读取状态
                const {ishot}=this.state
                return <h1 id="title" onClick={demo}>今天天气很{ishot ? '炎热': '寒冷'}</h1>
            }
        }
        // 渲染
        ReactDOM.render(<Weather/>,document.getElementById('test'))
        // const title = document.getElementById('title')
        // title.addEventListener('click',()=>{
        //     console.log('标题被点击了')
        // })

        // const title = document.getElementById("title");
        // title.onclick = ()=>{
        //     alert('按钮2被点击了')
        // }
        function demo()
        {
            console.log('标题被点击了')
        }
    </script>


</body>
</html>