【React 全家桶】React面向组件编程——函数式组件和类式组件

最新推荐文章于 2023-01-31 14:34:19 发布

@Dai

最新推荐文章于 2023-01-31 14:34:19 发布

阅读量508

点赞数

分类专栏： React 全家桶文章标签： react.js 前端 javascript html 前端框架

本文链接：https://blog.csdn.net/weixin_46318413/article/details/122450093

版权

React 全家桶专栏收录该内容

15 篇文章 3 订阅

订阅专栏

React面向组件编程——函数式组件和类式组件

一、组件与模块
二、React插件 - react_dev_tools
- 安装方法
- 颜色的表示
三、React 面向组件编程
- 函数式组件
- 类式组件

一、组件与模块

模块

1、理解：一般一个js文件就是一个模块
2、为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
3、作用：复用 js，简化 js 的编写，提高 js 运行效率

组件

1、理解：用来实现局部功能效果的代码和资源的集合（html/css/js等）
2、为什么：一个界面的功能更复杂
3、作用：复用编码，简化项目，提高运行效率

模块化

当应用的js都以模块来编写，这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

二、React插件 - react_dev_tools

链接: https://pan.baidu.com/s/1_gDQ691qucKbS0hVb4sObA?pwd=vvnx 提取码: vvnx 复制这段内容后打开百度网盘手机App，操作更方便哦

安装方法

将压缩包进行解压，打开谷歌浏览器，选择扩展程序（记得打开开发者模式），点击加载以解压的扩展程序，选择react_dev_tools文件夹。

颜色的表示

在这里插入图片描述
灰色表示当前页面没有使用react。

红色表示当前项目没有打包上线。

黑色表示已经打包上线。

三、React 面向组件编程

函数式组件

理解：使用函数形式定义组件的方式就是函数式组件

<!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 id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- 表示写的是jsx -->
    <script type="text/babel">
        // 1、创建函数式组件(首字母必须大写)
        function Demo() {
            console.log(this);//此处的this指向undefined,因为开启了严格模式
            return <h2>我是函数定义的组件(适用于[简单组件]的定义)</h2>
        }
        //渲染组件(组件使用标签,要闭合)
        ReactDOM.render(<Demo id="id属性" />, document.querySelector('#test'));
    </script>
</body>

</html>

在这里插入图片描述

函数式组件：执行ReactDOM.render(,…)之后发生了什么?
1.React解析组件标签,找到了Demo组件,找不到就报错
2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟dom转化为真实dom,随后呈现在页面中

类式组件

<!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 id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- 表示写的是jsx -->
    <script type="text/babel">
        // 1.创建类式组件
        class Demo extends React.Component {
            //render放在那里?-类的原型对象上
            render() {
                //render中的this指向类的实例对象 <=> 类组件实例对象
                console.log('render中的this', this)
                return (
                    <h1>
                        我是类定义的组件(适用于复杂组件的定义)
                    </h1>
                )
            }
        }
        ReactDOM.render(<Demo />, document.querySelector('#test'));
    </script>
</body>

</html>