React 定义组件

最新推荐文章于 2023-03-04 14:55:10 发布

IAN27

最新推荐文章于 2023-03-04 14:55:10 发布

阅读量181

点赞数

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

本文链接：https://blog.youkuaiyun.com/IAN27/article/details/115656242

版权

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了React中两种定义组件的方式：函数式组件和类式组件。函数式组件简单易用，而类式组件支持更复杂的功能如状态管理和生命周期方法。通过实例解析了两种组件的定义及使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.函数式组件

最简单的定义组件的方法是写一个 JavaScript 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>1_函数式组件</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">

    // 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，随后呈现在页面中。
    */
</script>
</body>
</html>

2.类式组件

1)基本方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <title>1_类的基本知识</title>
</head>
<body>
<script type="text/javascript">
    //创建一个Person类
    class Person{
        //构造器方法
        constructor(name,age){
            //构造器中的this是谁？ —— 类的实例对象
            this.name=name
            this.age=age
        }
        //一般方法
        speak(){
            console.log(`我叫${this.name}，我的年龄是${this.age}`)
        }
    }

    //创建一个Person的实例对象
    const p1 = new Person('tom',18)
    const p2 = new Person('jerry',19)

    console.log(p1);
    console.log(p2);
    p1.speak()
    p2.speak()

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

2）继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <title>1_类的基本知识 继承</title>
</head>
<body>
<script type="text/javascript">

    /*
        总结：
        1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如操作指定属性时才写。
        2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
        3.类中所定义的方法，都是放在了类的原型对象上，供实例去使用。
    */
   //创建一个Person类
    class Person{
        //构造器方法
        constructor(name,age){
            //构造器中的this是谁？ —— 类的实例对象
            this.name=name
            this.age=age
        }
        //一般方法
        speak(){
            //speak方法放在了哪里？ —— Person类的原型对象上
            //speak方法是给谁用的？ —— 供实例使用
            //通过Person实例调用speak时，speak中的this就是Person实例（例如，p1，p2）

            console.log(`我叫${this.name}，我的年龄是${this.age}`)
        }
    }
    //创建一个Student类，继承于Person类
    class Student extends Person{
        constructor(name,age,grade){
            super(name,age) //super必须放在所有人之前
            this.grade=grade
        }
        //重写从副类继承来的方法
        speak(){
            console.log(`我叫${this.name}，我的年龄是${this.age},我读的是${this.grade}年级`)
        }

        study(){
            //speak方法放在了哪里？ —— Student类的原型对象上
            //speak方法是给谁用的？ —— 供实例使用
            //通过Student实例调用study时，study中的this就是Student实例（例如，p1，p2）
            console.log(`我很努力的学习`)
        }
    }
    
        // const s1 = new Student('小张',15,'高一')
        // console.log(s1);
        // s1.speak()
        // s1.study()
    class Car {
        constructor(name,price){
            this.name = name
            this.price = price
            // this.wheel = 4
        }
        //类中可以直接写赋值语句
        //如下代码的含义是：给Car的实例对象添加一个属性，名为wheel，值为4。
        wheel = 4
    }

    const c1 = new Car('benz',199)
    const c2 = new Car('benz2',1999)
    console.log(c1)
    console.log(c2)


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

3)React中的类式组件

a.必须继承React.Component
b.必须使用render（），且必须有返回值return（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>2_类式组件</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">


//创建类式组件
//1.必须继承React.Component
//2.必须使用render（），且必须有返回值return（）
class MyComponent extends React.Component{
    render(){
        //render是放在哪里的？ —— Mycomponent的原型对象上，供实例使用。
        //render中的this是谁？ —— Mycomponent的实例对象 <=> Mycomponent组件实例对象。
        console.log('render中的this：',this)
        /*
        context:{}
        组件实例的三大属性
        props: {}
        refs: {}
        (状态)state: null
        */
        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>