函数式组件、类的相关知识点、类式组件

最新推荐文章于 2023-10-26 12:19:34 发布

向阳菌

最新推荐文章于 2023-10-26 12:19:34 发布

阅读量100

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_68997646/article/details/127446714

版权

1.函数式组件：函数里面的this指向是undefined，因为babel在项目当中开启了严格模式，也就是use strict模式，严禁函数this指向window

<!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>
    <style>
        .title{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <!-- 引入核心库，记得要放在react-dom前面，因为先有核心库，才能创建好环境引入其他依赖包 -->
    <script src="./react.development.js"></script>
    <!-- 引入react帮你操作DOM的库 -->
    <script src="./react-dom.development.js"></script>
    <!-- 将jsx转化为js -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">   //在这里一定要写成是babel
        function Demo(){
            console.log(this);
            return <div>laozhichi love liulijuan</div>
        }
        ReactDOM.render(VDOM,document.getElementById('root'))
        ReactDOM.render(<Demo/>,document.getElementById('root'))
    </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.name=name;
                this.age=age;
            }
            speak(){
                console.log(`我的名字是${this.name}，我的年龄是${this.age}`);
            }
        }
        const one=new Person('laozhichi',18)
        one.speak()
    </script>
</body>
</html>

类的继承：

在这里的super表示将父类的属性传进构造器当中

<!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.name=name;
                this.age=age;
            }
            speak(){
                console.log(`我的名字是${this.name}，我的年龄是${this.age}`);
            }
        }
        class Student extends Person{
            constructor(name,age,address){
                super(name,age)  
                this.address=address
            }
            speak(){
                console.log(`我的名字是${this.name}，我的年龄是${this.age},我的家庭住址是${this.address}`);
            }
        }
        const one=new Person('laozhichi',18)
        one.speak()
    </script>
</body>
</html>

3.类式组件

A.在这里的render的this指向指向render的实例对象

B.在渲染类式组件的时候，React先解析组件标签，找到Demo组件，发现该组件是用类定义的，随后new出来该组件的实例对象，通过该实例调用原来的render，将render返回的虚拟DOM转化为真实的DOM，随后展示在页面上。

<!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>
    <style>
        .title{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <!-- 引入核心库，记得要放在react-dom前面，因为先有核心库，才能创建好环境引入其他依赖包 -->
    <script src="./react.development.js"></script>
    <!-- 引入react帮你操作DOM的库 -->
    <script src="./react-dom.development.js"></script>
    <!-- 将jsx转化为js -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">   //在这里一定要写成是babel
        class Demo extends React.Component{
            render(){
                return <div>loveyou</div>
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById('root'))
    </script>
</body>
</html>