zoukankan      html  css  js  c++  java
  • 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)中描述

    简约而不简单!

    清醒时做事,糊涂时读书,大怒时睡觉,独处时思考; 做一个幸福的人,读书,旅行,努力工作,关心身体和心情,成为最好的自己 -- 共勉
  • 相关阅读:
    05.九个内置对象
    04.线程面试题-01
    03.反射杂谈
    02.Java动态代理实现与原理分析之静态代理
    01.JDBC技术摘要
    异步请求二
    表单验证(添加数据)
    异步请求(删除json数据)
    异步请求(解析json数据)
    异步请求(获取json数据)
  • 原文地址:https://www.cnblogs.com/hello-yz/p/8331751.html
Copyright © 2011-2022 走看看