• 【React】第二部分 面向组件编程

    【React】第二部分 面向组件编程

    文章目录

    2. 面向组件编程

    2.1 下载React开发者工具

    下载链接


    2.2 函数式组件

    需要注意:

    1. 组件名必须首字母大写

    2. 虚拟DOM元素只能有一个根元素

    3. 虚拟DOM元素必须有结束标签

    4. ReactDOM.render() 渲染函数式组件,第一个参数是标签必须是首字母大写并且自闭合

    5. 函数式中的this为undefined

    <!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>
        <div class="box"></div>
     <!-- 下面需要按顺序进行引入 -->
        <!-- 引入React核心库 -->
        <script src="./react.development.js" type="text/javascript"></script>
        <!-- 引入react-dom, 用来支持react去操作dom -->
        <script src="./react-dom.development.js" type="text/javascript"></script>
        <!-- 引入babel, 用来将jsx转化为js -->
        <script src="./babel.min.js" type="text/javascript"></script>
        <!-- 这里需要注意将type写成 text/babel-->
        <script type="text/babel" >
            // 创建一个函数式组件
            // 之前jsx规则说过,标签以大写字母开头react就会去渲染对应的组件
            function Demo(){
                // 此处的this为undefined,因为这里使用babel进行翻译,模式为严格模式
                // 在严格模式下,禁止自定义函数中的this指向window
                console.log(this); 
                return <h1>我是函数式组件(适用于简单组件)</h1>
            }

            // 渲染函数式组件
            // 在这里需要写标签,标签必须是首字母大写并且自闭合
            ReactDOM.render(<Demo/>,document.querySelector('.box'))
            // 执行上述代码,React解析组件标签,找到对应的组件,发现是一个函数定义
            // 随后调用函数将返回的虚拟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

    2.3 类式组件

    需要注意:

    1. 创建一个类式组件必须要继承React.Component这个类

    2. 必须要有render函数,并且需要有返回值

    3. 组件名必须首字母大写

    <!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>
    <div class="box"></div>
     <!-- 下面需要按顺序进行引入 -->
        <!-- 引入React核心库 -->
        <script src="./react.development.js" type="text/javascript"></script>
        <!-- 引入react-dom, 用来支持react去操作dom -->
        <script src="./react-dom.development.js" type="text/javascript"></script>
        <!-- 引入babel, 用来将jsx转化为js -->
        <script src="./babel.min.js" type="text/javascript"></script>
        <!-- 这里需要注意将type写成 text/babel-->
        <script type="text/babel" >
            // 创建一个类式组件
            class Demo extends React.Component{
                render(){
                  	// 此处的this指向的是该类的实例对象
                    console.log(this);
                    return (
                        <h1>我是类式组件(适用于复杂组件)</h1>
                    )
                }
            }

            ReactDOM.render(<Demo/>,document.querySelector('.box'))
            /* 
                执行上述代码,React解析组件标签,找到对应的组件,发现是一个类定义
                随后new一个该类的实例,并且通过该类去调用原型对象上的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

    总结

    以上就是今天要讲的内容，希望对大家有所帮助！！！

  • 相关阅读:
    Json“牵手”唯品会商品详情数据方法，唯品会商品详情API接口，唯品会API申请指南
    eclipse 或 sts 安装 antlr 插件
    基于Spring Boot的大学生就业管理系统毕业设计源码290915
    pytest + yaml 框架 -58.运行报告总结summary.json
    【C语言】标准内容介绍(C99)
    王学岗——钉钉视频会议实战，从零手写音视频会议项目
    异步编程
    GB/T 20909-2017 钢门窗检测
    浏览器必备的管理工具，蓝色书签让你更方便
    Momentum Contrast for Unsupervised Visual Representation Learning 论文学习
  • 原文地址：https://blog.csdn.net/Trees__/article/details/126157283