React模块与组件

最新推荐文章于 2023-06-19 11:04:46 发布

SeriesM

最新推荐文章于 2023-06-19 11:04:46 发布

阅读量138

点赞数

分类专栏：前端文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44003391/article/details/121767990

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

React模块与组件

文章目录

React模块与组件
前言
一、模块与组件、模块化与组件化的理解？
二、开发者工具的安装
- 1.导入
三、组件的定义
总结

前言

加下来我们将进行react模块组件化学习。

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

一、模块与组件、模块化与组件化的理解？

1.模块

1）定义：向外提供特定功能的js程序，一般就是一个js文件
2）为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
3）作用：复用js，简化js的编码，提高js运行效率

2.组件

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

3.模块化

当应用的js都以模块来编写的，这个应用就是一个模块化的应用（比如将index.js拆成a.js b.js等）

4.组件化

当应用是以多组件的方式实现，这个应用就是一个组件化应用
在这里插入图片描述

二、开发者工具的安装

1.导入

在这里插入图片描述

在这边导入react-dev的包

如果是react写的网站，那么打开会有亮

三、组件的定义

1.函数定义的组件（适用于【简单组件】的定义）

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React函数式组件</title>
</head>
<body>
<div id="test"></div>
<!--引入所依赖的库-->
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
//    1、定义函数式组件
//    首字母要大写
//函数必须有返回值
    function Demo() {
        return <h1>我是函数式定义的组件（适用于【简单组件】的定义）</h1>
    }
    //渲染组件到真实DOM
    ReactDOM.render(<Demo/>,document.getElementById('test'));
    //注意这里的组件要写成标签的形式，而且要大写，要有闭口，因为jsx要求要有闭口
</script>
</body>
</html>

在这里插入图片描述
注意：

1）首字母要大写：如果是小写React会默认寻找html里面的标签，大写才会寻找组件
2）函数一定要有return 
3）注意这里的组件要写成标签的形式，而且要大写，要有闭口，因为jsx要求要有闭口

执行过程：

1）1、react解析组件标签，找到了Demo组件
2）发现组件是用函数定义的，随后调用改函数，将返回的虚拟Dom转为真实DOM渲染到页面上

2.这里先复习类的相关知识，进入下面链接学习

https://blog.csdn.net/weixin_44003391/article/details/121771714

3.类式组件

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React函数式组件</title>
</head>
<body>
<div id="test"></div>
<!--引入所依赖的库-->
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
    //    1、定义类式组件
    //1、必须继承React.Component
    //组件要大写哦
    class Mycomponent extends React.Component{
        //2、必须重些render方法,render方法必须有return
        //render是放在哪里的？—MyComponent的原型对象上，供实列使用
        //render的this是谁？—MyComponent的实列对象
        render(){
            return <h1>我是类式定义的组件（适用于【复杂组件】的定义）</h1>
        }
    }
    //渲染组件到真实DOM
    ReactDOM.render(<Mycomponent/>,document.getElementById('test'));
    /*
        执行ReactDOM.render(<Mycomponent/>,document.getElementById('test'));之后发生了什么
        1、React解析组件标签，找到了Mycomponent组件
        2、发现组件是使用类定义的，随后new出来该类的实例，并通过实列调用到原型上的render方法
        3、将render返回的虚拟DOM转为真实DOM，随后呈现在页面上
     */
</script>
</body>
</html>

执行ReactDOM.render(,document.getElementById(‘test’))之后发生了什么

    1、React解析组件标签，找到了Mycomponent组件
    2、发现组件是使用类定义的，随后new出来该类的实例，并通过实列调用到原型上的render方法
    3、将render返回的虚拟DOM转为真实DOM，随后呈现在页面上

该处使用的url网络请求的数据。

下一篇我们将探讨类式组件的下面四个属性
在这里插入图片描述

总结

在本文章中，我们定义了React两种不同组件的书写定义格式，并且回顾了类的定义方式

SeriesM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React模块与组件

React组件
复制链接

扫一扫

专栏目录