七、React函数式组件与类式组件

鞋不压震

已于 2023-03-15 10:51:27 修改

阅读量113

点赞数

分类专栏： React技术总结文章标签： react.js javascript 前端

于 2023-02-15 16:47:05 首次发布

本文链接：https://blog.csdn.net/weixin_44054594/article/details/129042953

版权

React技术总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、函数式组件
二、类式组件
- 1.类的基本知识
- 2.类式组件使用

提示：以下是本篇文章正文内容，下面案例可供参考

一、函数式组件

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数式组件</title>
</head>
<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script src="./babel.min.js"></script>

  <script type="text/babel">
    // 1、创建函数式组件
    function MyComponenet(){
      console.log(this); // 此处的this是undefined,因为babel编译后开启了严格模式
      return <h2>我是函数组件</h2>
    }
    // 2、渲染虚拟组件到页面
    ReactDOM.render(<MyComponenet/>, document.getElementById('test'))    
    /*
      执行了ReactDOM.render之后发生了什么：
           1、React解析组件标签，找到了MyComponent组件。
           2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
    */
  </script>
</body>
</html>

二、类式组件

1.类的基本知识

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类的基本知识</title>
</head>
<body>
    <script type="text/javascript">
        // 创建一个person类
        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}`)
          }
        }  
        
        // 创建一个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(){
            console.log('努力学习')
          }
        }
    </script>
</body>
</html>

总结：
1、类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
2、如果A类继承了B类，且A类中写了构造函数，那么A类构造器中的super是必须要调用的。
3、类中所定义的方法，都是放在了类的原型对象上，供实例去使用。

2.类式组件使用

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>类式组件</title>
</head>
<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script src="./babel.min.js"></script>

  <script type="text/babel">
    // 1、创建类式组件
    class MyComponenet extends React.MyComponenet{
      render(){
        // render是放在哪里的？——MyComponent的原型对象上，供实例使用。
        // render中的this是谁？——MyComponent的实例对象<=>MyComponent组件实例对象
        return <h2>类定义的组件，适用于（复杂组件）的定义</h2>
      }
    }
    // 2、渲染组件到页面
    ReactDOM.render(<MyComponenet/>, document.getElementById('test'))    
    /*
      执行了ReactDOM.render()之后发生了什么？
         1、React解析组件标签，找到了MyComponent组件。
         2、发现组件是用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
         3、将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
    */
  </script>
</body>
</html>