❌ 状态是会由组件内部去改变的，它不会从组件的外部进行改变。如果我们想设计一个组件是从外部去改变组件的状态的话，那么我们组件内部的 state 就失控了。因为我们不知道组件外部什么时候会改变我们组件的 state，导致我们 state 的一致性无法保证。
✅ 但是作为一个组件的设计者和实践者，我们一定要保证用户输入是能改变我们组件的 state 的。比如说用户点击了一个 tab，然后点中的 tab 就会被激活，这种交互一般都会用 state 去控制的。
Config
✅ Config 在组件中是一个一次性生效的东西，它只会在我们组件构造的时候触发。所以它是不可更改的。也是因为它的不可更改性，所以我们通常会把 config 留给全局。通常每个页面都会有一份 config，然后拿着这个在页面内去使用。
组件生命周期 Lifecycle讲到生命周期，我们最容易想到的会有两个，一个是 created 一个是 destroy。世界万物的生命必定会有 出生 和 死亡，这两个生命周期。
那么在这两个开始与结束之间有什么生命周期呢？我们就需要想一下，一个组件在构造到销毁之间都会发生什么事情。
一个组件有一个非常重要的事情，就是它被创建之后，它有没有被显示出来。这里就涉及生命周期中的 mount，也就是组件有没有被挂載到 “屏幕的这棵树上”。这个生命周期我们可以在 React 和 Vue 里面看到，我们经常会使用这个生命周期，在组件被挂載后做一些相应的初始化操作。
有挂載那必然就会有卸载，所以组件中的 mount 和 unmount 是一组生命周期。而这个挂載与卸载的整个生命周期是可以反复的发生的，我们可以挂上去然后卸下来，然后再挂上去，这样反复又反复的走这个生命周期。
所以在 unmount 之后，我们是可以回到 created 构建组件的这个生命周期的状态。
那么组件还会在什么时候发生状态更变呢？这里我们就有两种情况：
程序员使用代码去改变或者设置这个组件的状态
用户输入时影响了组件的状态
比如说我们用户点了一下按钮或者 Tab，这个时候就会触发这个组件的状态更变。同时也会产生一个组件的生命周期，而这个生命周期就是 Render 渲染或者 Update 更新。
所有这些生命周期加在一起就是我们一个组件完整的生命周期。我们看到的所谓 willMount、didMount 无非就是这个生命周期之中更细节的位置。下面我给大家附上一张完整的生命周期的图。
最后我们来讲一下 Children （子组件）的概念。Children 是构建组件树最重要的一个组件特性，并且在使用中其实有两种类型的 Children：
Content 型 Children —— 我们有几个 Children，但是最终就能显示出来几个 Children。这种类型的 Children，它的组件树是非常简单的。
Template 型 Children —— 这个时候整个 Children 它充当了一个模版的作用。比如说我们设计一个 list，但是最后的结果不一定就与我们 Children 代码中写的一致。因为我们 List 肯定是用于多个列表数据的，所以 list 的表示数量是与我们传入组件的 data 数据所相关的。如果我们有 100 个实际的 children 时，我们的 list 模版就会被复制 100 份。
在设计我们的组件树的 children 的时候，一定要考虑到这两种不同的场景。比如我们在 React中，它没有 template 型的 children，但是它的 children 可以传函数，然后这个函数可以返回一个 children。这个时候它就充当了一个模版型 children 的作用了。那么在 Vue 里面当我们去做一些无尽的滚动列表的时候，这个对 Vue 的模版型 children 就有一定的要求。
结束语这里我们就学习完了整个组件的概念和知识了，下一篇文章我们就会一起来设计和搭建一个组件系统，并且了解到它的各方各面的实践知识。我们还会用一些典型的组件和典型的功能来让大家对组件的实现有一定的了解。
我们在这里互相监督，互相鼓励，互相努力走上人生学习之路，让学习改变我们生活！
学习的路上，很枯燥，很寂寞，但是希望这样可以给我们彼此带来多一点陪伴，多一点鼓励。我们一起加油吧！ (๑ •̀ㅂ•́)و
到此这篇关于前端组件化基础知识的文章就介绍到这了,更多相关前端组件化,前端基础知识,前端知识内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: