美文网首页
react学习(9)类式组件

react学习(9)类式组件

作者: 哆啦C梦的百宝箱 | 来源:发表于2022-08-11 11:32 被阅读0次
 <script type="text/babel">
        //创建类式组件
        class MyComponent extends React.Component {
            render(){
                return <h1>我是一个类式组件(适用于复杂组件的定义)</h1>
            }
        }
        //渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'));
    </script>
知识点
  1. 首先声明的组件类需要继承React.Component这个react的内置类。同时需要写一个render函数,类的方法在类的原型对象上。所以我们需要知道这个render函数,定义在MyComponent的原型对象上。render里面的this则指向的就是类的实例,也可以成为组件的实例。
  2. 写ReactDOM.render后发生了什么。
  • React解析组件标签,找到了MyComponent这个组件。
  • 发现组件是用类定义的,随后new出来该类的实例,并通过该实例调用到类原型上的render方法。这些都是react帮我们做的。
  • 将render返回的虚拟的DOM转化为真实DOM,呈现在页面。

相关文章

  • React Hooks

    前言 React中组件分为两大类:Class类式组件、函数式组件 React v16.8以前: Class类式组件...

  • react学习(9)类式组件

    知识点 首先声明的组件类需要继承React.Component这个react的内置类。同时需要写一个render函...

  • React Hooks 实现和由来以及解决的问题

    与React类组件相比,React函数式组件究竟有何不同? 一般的回答都是: 类组件比函数式组件多了更多的特性,比...

  • React - 类组件创建

    React创建组件有两种方式 函数式组件 类组件函数式组件已经学过,现在看下类组件怎么写。 函数式组件和类组件区别...

  • react中常见hook的使用方式与区别

    1、什么是hook?react hook是react 16.8推出的方法,能够让函数式组件像类式组件一样拥有sta...

  • React基础

    React包含react元素和react组件 react元素 react组件 react组件分为函数组件和类组件 ...

  • React基础篇之自定义组件

    类式组件 函数式组件 上一篇:React基础篇之JSX - 简书 (jianshu.com)[https://ww...

  • 来简单聊一聊React Hooks

    为什么会有Hooks?大家都知道React的组件创建方式,一种是类组件,一种是函数式组件,在React官方希望,组...

  • React Hooks 使用指南

    Hook 是 React 16.8 开始支持的新特性,旨在用函数式组件代替类式组件。本文记录常用Hook用法及注意...

  • 前端框架系列之(vue-class-component)

    简介: 说到函数式组件跟类组件在react官方就有提供,具体差异的话大家可以自行查阅react开发文档,下面我们看...

网友评论

      本文标题:react学习(9)类式组件

      本文链接:https://www.haomeiwen.com/subject/oonnwrtx.html