【评论参与抽奖】来一起聊一聊组件和组件化开发

本文已申请到掘金周边礼物，掘金徽章*2 用于评论区抽奖，通过评论的方式参与 详情

前言

随着前端发展越来越规范和复杂度的提升，防止代码冗余、便于维护、提高可读性，前端组件化开发已经是现在发展的趋势。那我们现在来仔细聊聊，什么是组件化开发呢？怎么去设计封装一个组件去提高你的工作效率。

为什么组件化开发？什么是组件化开发呢？

其实前言所描述的基本就是我们要组件化开发的原因了，当你页面代码量和逻辑太多，同一个功能或者相同的代码在多个页面使用，维护成本太大，这时候就需要组件化开发去减少你的代码量降低维护成本，增加代码的可读性，提升开发效率。

组件化开发的原则

• 可复用 组件是独立的，但是组件要试用于多个场景，不能一个组件只能试用玉当前场景，场景稍微一遍组件就不能用了那这就是一个有问题的组件，甚至可以说不是一个组件。
• 可配置 一个组件要做到简单明了的让其他人能够快速了解你这个组件做了什么，通过什么方式向组件传值什么属性什么值你会得到相什么值，组件的设计与方法和值要语义化，不能表面意思是干1的事实际去干了2的事。

木偶组件和智能组件

其实在 React 社区里大致将组件分为了两种:

1. 木偶组件：顾名思义就像一个牵线的木偶一样，根据外部穿入的 props 去渲染相对应的视图，不管这个数据哪里来。
2. 智能组件：一般是包裹着木偶组件，通过请求等其他方式获取数据，然后传入给木偶组件，控制它的渲染。

<智能组件>
    <木偶组件 />
</智能组件>    
复制代码

函数组件

在 React 中函数式组件搭配 Hooks 基本是现在的主流和未来的发展方向了。

函数组件没有任何状态，无法实例化没有this，内部也没有任何生命周期，实际上他只是接受一些 props 函数，可以把函数组件简单的理解为一个 function 定义了一些形参，接受了一些实参在 function 内部做了一些事处理了一些东西。

梳理好组件的关系

<grandpa>
    <father>
        <grandson />
    </father>
</grandpa>
复制代码

在这里我们写了三个组件来简单介绍梳理一下

1. grandpa 想要给 grandson 压岁钱，那么 grandpa 直接给 grandson 定向广播：broadcast 这时候 father 就不要传送数据了。
2. grandpa 想要买肉让 father 给 grandson 做红烧肉，那么关系就是数据逐层传递并做相应的处理最后给到 grandson。
3. grandson 给 grandpa 送礼物，那么 grandson 直接给 grandpa 定向派发：dispatch

各位掘友可以在评论区讨论一下你在开发中对于组件化开发和封装组件的心得，还有机会可以获得精美奖品一份！
评论区抽奖要求：

• 截止到 9月10日，如果评论区超过 10 人互动（不含作者本人），作者可以以自己的名义抽奖送出掘金徽章 2 枚（掘金官方承担）。
• 截止到 9月10日，如果评论区超过 10 人互动（不含作者本人），评论数超过 20 条（含作者本人），作者本人额外获得一份掘金周边礼物。
• 评论区热度最高（评论人数+条数综合数据）TOP 1-5：徽章1套 或 掘金IPT恤1件

抽奖须知

本活动由掘金官方支持 详情可见 juejin.cn/post/700064…
里边名单公布有我本人。

截止到 9月10日，如果评论区超过 10 人互动（不含作者本人），作者可以以自己的名义抽奖送出掘金徽章 2 枚（掘金官方承担）。

1. 通过评论方式参加。
2. 评论必须和此文章有关的内容。
3. 奖品最终会由热评用户获得。
4. 获奖后我会以评论方式告知你并添加微信留收货地址。

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期精彩推荐

canvas 爬坑路【方法篇】

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

我在工作中是如何使用 git 的

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见：个人主页