首页 > 教育培训

react创建组件的方式并举例说明 前端都是组件化开发吗？

实习编辑 • 2023-11-19 20:07:46 • 教育培训 • 阅读 3

前端都是组件化开发吗？

组件化的目的是使页面的所有部分都可以重用，以减少重复代码。另一方面，也可以让团队更好的工作，让不同的人负责编写不同的组件。

前端页面可以使用一些框架(比如vue.js，angular，react)来开发，让代码更容易重用。此时，一个网页不再是由独立的html、css和javascript文件组成，而是按照组件的思想划分成组件，比如轮播组件、列表组件、导航栏组件等等。将这些组件放在一起，形成一个完整的网页。

react中如何快速创建含有connect的组件？

react创建组件的方式并举例说明 前端都是组件化开发吗？

通过react中的create选项使用connect快速创建组件。

react组件设计思路是怎样的？

我是前端，用react年了。我来回答这个问题！

首先，有三种方法可以创建react组件:

功能性无状态组件

采取

(不推荐)

类继承

让让我们分别谈三种。

第一种:

它只是一个形式上的函数，函数参数是传入的属性props。在生命周期中没有钩子函数，它不会被实例化。函数中不能使用this关键字，组件的数据来自props。没有自己状态的组件可以采用这种方法，优点是性能好。

第二种:基本废弃。

第三种:

以es6类的形式定义，继承自react的组件，生命周期中的每个钩子函数都挂在实例上，在整个生命周期中可以通过state和props控制组件的状态，state就是组件本身的状态。

高阶分量

所谓高阶分量，其实就是把一个分量传入一个函数，返回一个新的分量。实现方法如下:

1.定义一个函数，参数是react组件，返回另一个组件。

2.采用es6的装饰器。

简单来说，就是用另一层来封装组件。包装方法如下:

1.将参数用作子部件。

2.直接继承参数作为父类。

注意:高阶组件的作用是复用相同的组件逻辑，所以难点在于如何提取这些组件的共同逻辑，并提供给很多人使用。我觉得有必要维护一个通用的组件库！

组件的划分

让让我们以上页为例来说明组件的划分。该页面分为两个块。虚线框包含过滤项，包括输入框、选择项和搜索按钮，底部是搜索结果。那么遇到这样的页面怎么划分组件呢？

我认为有两种方法:

1.输入框、选项、搜索按钮、搜索结果和列表都是一个组件(常见思维)。

2.整个页面是一个组件。

第一种划分

功能划分细致、灵活、可维护，可它是高度可配置的，可以通过不同的组合呈现不同的页面。但是在开发页面的时候，需要一个一个拼接组件，可能还需要开发一些其他的逻辑。

第二种

灵活性差，逻辑复杂，维护性差，但是如果你开发的页面都是这个样子，就很适合这么做，加上脚手架，就会嗖的一声。

所以组件的划分还是要看业务！

喜欢我的回答就关注我。有问题可以评论。让让我们一起学习，一起成长！

组件页面方法函数react

原文标题：react创建组件的方式并举例说明 前端都是组件化开发吗？，如若转载，请注明出处：https://www.suhaipipe.com/tag/19999.html
免责声明：此资讯系转载自合作媒体或互联网其它网站，「蓝鲸百科」登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，文章内容仅供参考。

react创建组件的方式并举例说明 前端都是组件化开发吗？ react创建组件的方式并举例说明 前端都是组件化开发吗？介绍
赞 ( )
打赏 微信扫一扫微信扫一扫
上一篇：华为mate30滑动设置 华为mate30锁屏滑动解锁怎么取消？ 下一篇：怎么找回自己名下的微信公众号 办理房产证关注的公众号是什么？

相关推荐