【代码格式优化】- 模块化开发、函数式、组件式渲染

一、文章描述

文章初衷
该文章用于规范页面代码格式，主要思路是将页面进行模块化划分，一个模块对应一个render函数，每个render函数负责一个模块的开发，通过调用render函数的形式，来实现每个模块的渲染，最终完成总体页面渲染层的展示，此文章为个人分享，仅限参考。

适用场景
渲染层之间分工明确，不涉及过多的传参或交互。

最终目标
保证代码总体简洁，代码结构清晰，渲染层之间分工明确，各司其职。

结构优势
模块分工明确，提测阶段可以通过问题去匹配对应模块，通过匹配的模块更快捷地寻找到问题点，减少查看无用代码时间。

二、结构描述

模块化
将渲染层进行模块化划分，主要保证每个模块之间可以各司其职，这样我们可以专注于每个模块去进行代码逻辑层的编写和渲染层的实现。

函数式
将每个模块对应的代码存放到对应的render函数之中，保证每一个render函数只负责一个模块的代码管理，只进行一个模块的开发，只实现一个模块的渲染，后期可以通过模块定位问题，寻找问题，修复问题。

组件式
与函数式不同的是，组件式使用的是组件的思想来进行渲染，因此组件式可以用来进行性能优化，例如使用useMemo、react.memo来渲染，也可以进行组件缓存。

唯一性
页面Index主函数唯一，且只负责调用render函数的渲染，实现视图的渲染和更新，不涉及代码层的开发和管理。

三、最终展示