powerdesigner未发现oracle(tm)客户端和网络组件_构建 React 组件的关键概念 / 指南

《构建 React 组件的关键概念 / 指南》中的一些概念不仅仅可以应用在 React 组件开发方面，本文更深层次的关注点是 “构建组件的关键概念 / 指南”，只不过本文集中围绕 React 展开。本着开放的态度阅读、琢磨《构建 React 组件的关键概念 / 指南》会更合理。

《构建 React 组件的关键概念》额外从《React 哲学》、《React Patterns》提取了些要点。

目录

• 创建
  • 分析 UI 稿并设计 React 组件
  • 实现静态 React 组件
  • 添加交互
• 整洁之道
• 重构
• 总结
• 附录
• 其它
  • 阅读、使用、贡献
  • 交个朋友

分析 UI 稿并设计组件

• 图示 UI 稿中的组件层级。另外，后续存在调整的可能性，且可以帮助长时间未返工该组件的自己或其他工程师快速理解，所以保留这样的图示；
• 拆分组件层次的过程中起码要遵循 "单一职责" 这个设计原则。反复温故 “S.O.L.I.D” 设计原则百利无一害；
• 确定组件在交互、性能、适配等方面的特征，
  • 尺寸感知；
  • 布局感知（响应式）；
  • 网络感知；
  • 硬件感知；
  • 性能感知；
  • ......
• 合理设定复用性；
  • 复用性格局，
    • 项目内复用；
    • 项目间复用；
  • 格局不同，组件在灵活性方面的设计不同。期望项目内复用性格局下实现的组件在项目间复用，运气好点工作量不大，反之就很苦恼了。打个比方，因为家用飞机缺失战斗机的功能，所以不顾家用飞机的定位设计，毅然拿来充当战斗机使用，一定是蹩脚的，而且与真正的战斗机差距很大，此时研制或换成一架真正的战斗机，会更合理些。根本不可能指望一架飞机同时拥有战斗机、轰炸机、私人飞机、空中巴士等所有的特点；
  • 项目内复用的组件类似于模具，造船、做衣服、吹瓶子的模具。模具成型后，修改的成本极大，几乎不可能跨品牌、跨主题使用。所以，越是仅专注于当前项目的组件越是要明白跨项目复用的局限性。其实从划分组件层级时，就要有具象、抽象组件两种概念，后者为了高度复用，甚至跨项目复用，前者为了直接使用的便利性，项目内复用便利性很强，但自定义能力方面偏弱；
  • 无论项目内抑或项目间