react16：函数组件与类组件

最新推荐文章于 2023-12-20 10:57:16 发布

richest_qi

最新推荐文章于 2023-12-20 10:57:16 发布

阅读量1.4k

点赞数

分类专栏： React17/18 文章标签：函数组件类组件类与继承

本文链接：https://blog.csdn.net/qzw752890913/article/details/123712471

版权

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

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>函数组件</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>
<body>
    <div id="app">

    </div>

    <script type="text/babel">
        function MyComponent(){
            return <div>Hello,React</div>;
        }

        ReactDOM.render(<MyComponent/>,document.getElementById("app"));
    </script>
</body>
</html>

在这里插入图片描述

这里的MyComponent就是一个函数组件，它返回了一个虚拟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>基础知识：类与继承</title> 

</head>
<body>  
    <script>
        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,grade){
                super(name,age);
                this.grade = grade;
            }
            speak(){
                console.log(`我叫${this.name},今年${this.age}岁,正在读${this.grade}`);
            }
        }

        let p1 = new Person("张三",18);
        p1.speak();
        console.log(p1);

        let s1 = new Student("李四",15,"高一");
        s1.speak();
        console.log(s1);
    </script>
</body>
</html>

在这里插入图片描述
定义类时，构造器方法不是必须的。如果需要进行一些初始化操作，才会定义构造器方法。
类中定义的方法，放在类的原型对象上，以供所有实例调用。

类组件：一个简单的例子

<!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>类组件：一个简单的例子</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>
<body>
    <div id="app">

    </div>

    <script type="text/babel">
        class MyComponent extends React.Component{
            render(){
                return <div>Hello,React</div>;
            }
        }

        ReactDOM.render(<MyComponent/>,document.getElementById("app"));
    </script>
</body>
</html>

在这里插入图片描述
这里的MyComponent就是一个类组件，它继承了父组件React.Component，覆写了render方法，render方法返回了一个虚拟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>类组件：一个完整的例子</title> 
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>
<body>  
    <div id="app"></div>
    <script type="text/babel">
    class Weather extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                isHot:true
            }
            this.changeWeather = this.changeWeather.bind(this);
        }
        changeWeather(){
            const { isHot } = this.state; 
            this.setState({
                isHot: !isHot
            })
        }
        render(){
            const { isHot } = this.state;
            return <h2 onClick={this.changeWeather}>今天天气很{isHot ? "炎热" : "凉爽"}</h2>
        }
    }
    
    ReactDOM.render(<Weather/>,document.getElementById("app"));
    </script>
</body>
</html>