reactjs 架构 react项目架构

任何一种语言、框架，在真正上手的时候，多多少少会想想怎么安排项目结构（正所谓磨刀不误砍柴工），React也不例外。

google了下，拿下面3篇博客来说道说道。

（1） how-to-better-organize-your-react-applications

（2） the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing

（3） react-project-structure

 

（1）主张将React项目结构分为components, scenes, services 

components: 可嵌套组件，可认为是组件仓库

scenes: 实际上就是我们所看到的页面，也可嵌套

services: 包含业务逻辑并向后台发请求

（2）先从使用角度分析了React开发过程中的时间消耗，并根据此来规范下React的项目结构

时间消耗前三：

　　1. 在编辑器中切换文件tab页

　　2. 根据文件结构找到文件，打开

　　3. link到其他文件

仍然是组件集中的方式，可嵌套；组件中包含css；使用容器组件；js的命名同export的组件名称相一致；在utils里使用index.js，其中声明各个方法的export

（3）个人推荐 - Simple is better. Start simple. Keep it simple.

src/api.js：调用后台api，若方法过多可以改为src/api文件夹，内部多个js

src/components：展示层组件，基本只用来定义各个组件属性

src/containers：容器组件，含状态并调用api

src/images：图片

src/index.js：初始化app并调用ReactDOM.render()

src/utils：错误处理、格式化等，类似（2）中描述

 

简约而不简单！