react-创建组件的两种方式

一、函数式组件

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_reacttitle>
head>

<body>
    
    <div id="test">div>
    
    <script type="text/javascript" src="/react-development.js">script>
    
    <script type="text/javascript" src="/react-dom-development.js">script>
    
    <script type="text/javascript" src="/babel.min.js">script>
    <script type="text/babel">
        // 1.创建函数式组件
        function Demo() {
            return <h2>我是用函数定义的组件</h2>
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Demo />, document.getElementById('test'))
        /**
         * 执行了ReactDOM.render(.....)之后，发生了什么？
         * 1.React解析组件标签，找到MyComponent组件。
         * 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
         * 
         */
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

二、类式组件

类式组件的话是通过es6的语法class来实现，通过通过创建一个类来继承React.Component父类，在定义的类组件中定义一个render()方法，该方法是放在该类实例对象的原型对象上的,ReactDOM.render内部通过new出来该类的实例，并通过该实例调用原型链上的render方法，将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_reacttitle>
head>

<body>
    
    <div id="test">div>
    
    <script type="text/javascript" src="/react-development.js">script>
   
    <script type="text/javascript" src="/react-dom-development.js">script>
    
    <script type="text/javascript" src="/babel.min.js">script>
    <script type="text/babel">
        // 1.创建类式组件
        class MyComponent extends React.Component {
            render() {
                console.log(this);
                // render是放在哪里的？MyComponent的原型对象上，供实例使用。
                // render()中的this指向的是MyComponent组件实例对象
                return <h2>我是用函数定义的组件</h2>
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        /**
         * 执行了ReactDOM.render(.....)之后，发生了什么？
         * 1.React解析组件标签，找到MyComponent组件。
         * 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用原型链上的render方法
         * 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
         */
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

相关阅读:
KingbaseES插件参考手册（2. 扩展插件概述）
CSS3-圆角边框border-radius 盒子阴影border-shadow
mybatis用拦截器实现字段加解密
FFmpeg提取视频参数，以及剪辑视频，拼接视频，合并视频，抽帧等
股指期货如何交易？有哪些交易策略和操作技巧？
微信、支付宝、百度、抖音开放平台第三方代小程序开发总结
Huggingface遇到 Couldn‘t reach xxx on the Hub (ConnectionError)解决方法
Flow深入浅出系列之使用Kotlin Flow自动刷新Android数据的策略
只要背着电脑，他可以去任何地方
一阶滞后低通滤波器(支持采样频率设置博途SCL代码)

原文地址：https://blog.csdn.net/weixin_51938803/article/details/138172651