React组件设计原则
React 组件在职责划分、状态位置、组合方式与接口设计上的常用原则。
#tech / dev / frame
#resource / react
#type / synthesis
#status / growing
[!info] related notes
- 所属 MOC: React MOC
- 相关概念: React中的props、state和ref, React组件渲染与重渲染
React组件设计原则
React 组件的可维护性，主要取决于三件事：职责是否清晰、状态放得是否合适、组合边界是否稳定。
为什么要单独理解这一层
很多 React 组件会越来越难改，不是因为 Hook 太多，而是因为组件一开始就把展示、状态、副作用、数据请求和复用逻辑全绑死了。
几条最实用的原则
单一职责
一个组件最好解决一个主要问题，不要既当页面容器又当通用展示组件。
状态尽量靠近使用处
不是所有状态都该往上提，只有共享需求明确时才提升。
组合优于继承
React 更适合通过小组件拼装复杂 UI，而不是通过复杂继承层级组织行为。
接口清晰
props 应该表达组件真正需要的输入，不要把内部实现细节暴露出去。
一个实用判断题
如果一个组件既负责请求、又负责布局、又负责表单、又负责复杂副作用，它通常就该拆了。
最短记忆方式
好组件不是“包罗万象”，而是“边界稳定、职责明确、组合自然”。