React 组件应该如何组织？
大家好，我是前端西瓜哥。
对于前端开发来说，我们通常在框架上做开发。目前主流的框架是 Vue 和 React 框架（以及 Augular？），它们能够在一开始的默默无闻到后来的主流，是因为它们重新定义了前端开发的流程。主要提供了下面的能力：
-
使用声明式编程，抛弃命令式编程。我们不需要手动地更新 DOM，只需要修改一些状态的值，这些框架就会自动帮我们更新视图。 -
使用了虚拟 DOM。将对 DOM 的操作封装了一层，减少 DOM 操作造成的渲染花销，将 GPU 密集型切换为高效的 CPU 密集型。同时也为支持跨平台编译开发提供了可能，如 React Native。 -
组件化。将关联的状态、脚本、样式和模板组合为一个类，就是所谓的组件。这让我们对代码能进行更好的管理。
其中的组件化，给我们引入了非常好的代码组织方式，能够让所有相关的逻辑聚合在一起，成为一个组件。
但光有思想是不行的，还要落地。那么到底该怎么去做组件化的编程呢？下面是我的一些想法。
一个文件应该只有一个组件
我是用 React 做开发的。
最近接了需求要改一个组件的逻辑，发现同事在一个文件里写了很多个子组件。
我改逻辑的时候，会在文件内搜一个变量名 ，通过看它的变化过程来理解业务逻辑。然而我发现这个变量名在一些不相关的子组件中被局部声明过，对我产生了不少干扰。而且在修改时，也可能不小心改错组件。
一个文件应该只有一个组件。如果你想将这个组件做更好地抽象，我建议你额外新增一个文件来放子组件。这样以后如果子组件如果想要复用，提取出来也会更方便。
因为子组件可能会有多个，所以我们通常会将子组件放到名为 components 或 modules 的和父组件同级的目录中。
.
└── Todo
├── components
│ ├── HeaderInput
│ │ ├── index.tsx
│ │ └── style.module.less
│ └── TodoItem
│ ├── index.tsx
│ └── style.module.less
├── index.tsx
└── style.module.less
不要用 renderXx 的方式来表示组件
在子组件比较简单的情况下，一个组件里写多个子组件其实也是可以的。但如果你复杂了还是建议新开一个文件。
但请不要用 renderXx 的命名方式来写一个组件，因为它并不代表返回的是一个组件，有一定的歧义。
建议使用大驼峰的正规组件写法。如果你使用了 ts，别忘记显式写上返回类型为 React 元素。
结尾
之前我是一名 Vue2 选手，一个 .vue 文件只能写一个 template，导致开发人员一个文件只能写一个组件。当然其实也可以在 .vue 文件写多个组件的，但非常蹩脚且会损耗运行性能。
而 React 则是通过 jsx，让我们可以通过类或函数的方式来开发组件，带来了极高的灵活性，但这也导致一些不好的实践。
不得不说，灵活有利有弊。
灵活性高能让我们按照自己的心意去组织代码，但当项目变得复杂时，就可能会发现开发体验开始下降了，不得不考虑做一些重构工作。
灵活性低，就需要我们依据特定的规范去开发代码，想稍微跳脱一下都无法做到，可能在开发过程中为了符合规范而写一些繁琐的代码。但随着项目日益复杂，我们会发现代码依然井然有序。