React 之道，最佳实践
Tao of React - Software Design, Architecture & Best Practices
React Architecture: How to Structure and Organize a React Application
组件
偏爱函数式组件
没有生命周期、构造函数、样板代码
编写一致性组件
坚持相同的风格，辅助函数放相同位置、相同的方式导出、遵循相同的命名规则
组件名称
始终命名你的组件，便于在 React Dev Tools 中追踪
辅助函数
不需要保持闭包的辅助函数移到组件外部，减少组件噪音
不要硬编码
使用配置对象
组件长度
一个函数如果做了很多事情，考虑提取逻辑。
在 JSX 中注释
在代码块中提供逻辑注释
使用错误边界
利用 ErrorBoundary
解构参数
解构 ...props
参数数量
如果一个组件 props 过多，考虑拆分？
props 越多，意味着重新渲染的可能越多
传递对象
传递一个数据相关的对象，而不是一个一个传入
条件渲染
使用三元表达式不容易出错。短路运算可能适得其反
避免嵌套条件渲染
在单独的组件中使用列表
将 map 渲染的组件提取为一个组件
在参数解构时赋予默认值
defaultProps 是另外附加到组件的，意味着和参数值不在一起。
在参数解构时赋予默认值可以更轻松的从上往下看代码。
避免嵌套的渲染函数
状态管理
使用 reducer
组件心智模型
应用结构
性能
不要过早优化
在性能优化前，构建可读可维护的组件更重要。
查看 bundle 尺寸
不要发布单独 bundle 的js 文件，尽可能在路由级别或更高级别拆分
重新渲染
注意你的参数：函数、对象、数组
测试
样式
数据请求
使用数据处理库
React Query swr