React中如何拆分组件

基于自己工作中的体会，还有在做的过程中翻阅的资料，看的资料没有收藏起来，很想指出具体的出处，但是很多都是从各个地方看到的。不过都是在掘金、公众号前端开发、还有知乎上看到的。

😫 前言

随着web业务越来越复杂，一个页面必须要分成多个部分才能使得代码逻辑更加的清晰，出了问题也能更加快速的定位。所以说如果分组件的重要性不言而喻。

一、基本原则

• 每个组件不能超过300行:网上看好多人都说是200行，但是那样实际操作的话，压力会很大的，导致很多时候会为了分组件而分组件。其实分组件的目的就是为了可读性和可维护性。为了分组件而分组件的话，很多时候写的会很散很乱，违背了分组件的原则。 一切都是为了可读性和可维护性 组件有两种类型：一种是有状态的，一种是无状态的 从不同纬度考虑的话，可以分为四种：逻辑组件（智能组件）、UI组件（木偶组件） 、路由组件、状态组件（当前工作环境等常量） 业务代码的复用高于代码的复用* 公共组件可以有自己的方法，但是数据的展示依旧是拿props。一定要在跨页面使用的情况下才放在主目录的componets中> 无论是Vue、augular还是React提倡的基于数据驱动的设计理念——程序定义好Model和View的关系，剩下的业余处理只需要关心数据变化，View的变化由框架自动执行，无需像jquery时代再去手动操作DOM。