组件化的目的是使页面的所有部分都可以重用,以减少重复代码。另一方面,也可以让团队更好的工作,让不同的人负责编写不同的组件。
前端页面可以使用一些框架(比如vue.js,angular,react)来开发,让代码更容易重用。此时,一个网页不再是由独立的html、css和javascript文件组成,而是按照组件的思想划分成组件,比如轮播组件、列表组件、导航栏组件等等。将这些组件放在一起,形成一个完整的网页。
通过react中的create选项使用connect快速创建组件。
我是前端,用react年了。我来回答这个问题!
首先,有三种方法可以创建react组件:
功能性无状态组件
采取
(不推荐)
类继承
让让我们分别谈三种。
第一种:
它只是一个形式上的函数,函数参数是传入的属性props。在生命周期中没有钩子函数,它不会被实例化。函数中不能使用this关键字,组件的数据来自props。没有自己状态的组件可以采用这种方法,优点是性能好。
第二种:基本废弃。
第三种:
以es6类的形式定义,继承自react的组件,生命周期中的每个钩子函数都挂在实例上,在整个生命周期中可以通过state和props控制组件的状态,state就是组件本身的状态。
高阶分量
所谓高阶分量,其实就是把一个分量传入一个函数,返回一个新的分量。实现方法如下:
1.定义一个函数,参数是react组件,返回另一个组件。
2.采用es6的装饰器。
简单来说,就是用另一层来封装组件。包装方法如下:
1.将参数用作子部件。
2.直接继承参数作为父类。
注意:高阶组件的作用是复用相同的组件逻辑,所以难点在于如何提取这些组件的共同逻辑,并提供给很多人使用。我觉得有必要维护一个通用的组件库!
组件的划分
让让我们以上页为例来说明组件的划分。该页面分为两个块。虚线框包含过滤项,包括输入框、选择项和搜索按钮,底部是搜索结果。那么遇到这样的页面怎么划分组件呢?
我认为有两种方法:
1.输入框、选项、搜索按钮、搜索结果和列表都是一个组件(常见思维)。
2.整个页面是一个组件。
第一种划分
功能划分细致、灵活、可维护,可它是高度可配置的,可以通过不同的组合呈现不同的页面。但是在开发页面的时候,需要一个一个拼接组件,可能还需要开发一些其他的逻辑。
第二种
灵活性差,逻辑复杂,维护性差,但是如果你开发的页面都是这个样子,就很适合这么做,加上脚手架,就会嗖的一声。
所以组件的划分还是要看业务!
喜欢我的回答就关注我。有问题可以评论。让让我们一起学习,一起成长!