两年React老兵的总结 - 如何组织React项目

hoohack 发布于2019-08-23 18:40 / 3275人阅读

摘要：一个复杂的应用都是由简单的应用发展而来的随着越来越多的功能加入项目代码就会变得越来越难以控制本文章主要探讨在大型项目中如何对组件进行组织让项目具备可维护性系列目录类型检查组件的组织样式的管理组件的思维状态管理目录组件设计的基本原则基本原则高

一个复杂的应用都是由简单的应用发展而来的, 随着越来越多的功能加入项目, 代码就会变得越来越难以控制. 本文章主要探讨在大型项目中如何对组件进行组织, 让项目具备可维护性.

系列目录

01 类型检查

02 组件的组织

[03 样式的管理]()

[04 组件的思维]()

[05 状态管理]()

1. 组件设计的基本原则

基本原则

高质量组件的特征

2. 基本技巧

3. 组件的分类

1️⃣ 容器组件和展示组件分离

2️⃣ 分离逻辑和视图

3️⃣ 有状态组件和无状态组件

4️⃣ 纯组件和非纯组件

5️⃣ 按照 UI 划分为布局组件和内容组件

6️⃣ 接口一致的数据录入组件

4. 目录划分

1️⃣ 基本目录结构

2️⃣ 多页应用的目录划分

3️⃣ 多页应用的目录划分: monorepo 模式

4️⃣ 跨平台应用

5️⃣ 跨平台的另外一种方式: taro

5. 模块

1️⃣ 创建严格的模块边界

2️⃣ Named export vs default export

3️⃣ 避免循环依赖

4️⃣ 相对路径不要超过两级

6. 拆分

1️⃣ 拆分 render 方法

2️⃣ 拆分为组件

7. 组件划分示例

1️⃣ 划分页面

2️⃣ 划分基础 UI 组件

3️⃣ 设计组件的状态

8. 文档

扩展

1. 组件设计的基本原则 基本原则

单一职责(Single Responsibility Principle). 这原本来源于面向对象编程, 规范定义是"一个类应该只有一个发生变化的原因", 白话说"一个类只负责一件事情". 不管是什么编程范式, 只要是模块化的程序设计都适用单一职责原则. 在 React 中, 组件就是模块.

单一职责要求将组件限制在一个"合适"的粒度. 这个粒度是比较主观的概念, 换句话说"单一"是一个相对的概念. 我个人觉得单一职责并不是追求职责粒度的"最小"化, 粒度最小化是一个极端, 可能会导致大量模块, 模块离散化也会让项目变得难以管理. 单一职责要求的是一个适合被复用的粒度.

往往一开始我们设计的组件都可能复合多个职责, 后来出现了代码重复或者模块边界被打破(比如一个模块依赖另一个模块的"细节"), 我们才会惰性将可复用的代码抽离. 随着越来越多的重构和迭代, 模块职责可能会越来越趋于"单一"(

GPU云服务器云服务器怎么部署react项目 react如何部署到云服务器上 react _React

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105652.html

两年React老兵的总结 - 类型检查篇

摘要：系列引言最近准备培训新人为了方便新人较快入手开发并编写高质量的组件代码我根据自己的实践经验对组件设计的相关实践和规范整理了一些文档将部分章节分享了出来由于经验有限文章可能会有某些错误希望大家指出互相交流由于篇幅太长所以拆分为几篇文章主要有以系列引言最近准备培训新人, 为了方便新人较快入手 React 开发并编写高质量的组件代码, 我根据自己的实践经验对React 组件设计的相关实践...

scola666 2019-08-23 18:38 评论0 收藏0
前端周刊第62期：学习学习再学习

摘要：腾讯前端技术大会和全球技术领导力峰会都于上周闭幕，我翻看了下讲稿，有价值的参考还是不少。腾讯前端大会下载腾讯前端大会是由腾讯主办，广邀国内外的前端大牛，有著名流行框架的作者知名前端书籍的作者工程化方面的权威等。 showImg(https://segmentfault.com/img/bVQk0r?w=757&h=427); 共 2462 字，读完需 4 分钟。腾讯前端技术大会（TFC...

tinylcy 2019-08-20 17:46 评论0 收藏0
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论

摘要：工程实践立足实践，提示实际水平内联函数与性能很多关于性能优化的文章都会谈及内联函数，其也是常见的被诟病为拖慢性能表现的元凶之一不过本文却是打破砂锅问到底，论证了内联函数并不一定就会拖慢性能，过度的性能优化反而会有损于应用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 评论0 收藏0
您的四月份前端补给包已到，请查收～

摘要：版本发布月日，官博发文宣告正式发布。官方文档提供了如下的示例终端上的输出热门文章我在阿里云做前端抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏...

wushuiyong 2019-08-02 16:15 评论0 收藏0
您的四月份前端补给包已到，请查收～

摘要：版本发布月日，官博发文宣告正式发布。官方文档提供了如下的示例终端上的输出热门文章我在阿里云做前端抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏...

amc 2019-08-23 17:14 评论0 收藏0