最基本的原则

1. 承认电脑比人更加聪明（如何合理使用工具保证代码质量）
   • 使用eslint,并开启rule-of-hooks/exhuastive-deps
   • 使用strict 模式
   • 对deps保证诚实，并解决掉exhaustive-deps warning
   • 对于map展示的组件永远添加key,不建议使用index
   • 理解报警：Can't perform state update on unmounted component
   • 解决'死亡白屏': 添加error boundary&sentry
   • tree-shaking
   • 使用Prettier 格式化代码
   • 使用Ts
2. 代码是必要的恶魔（the best code is no code)
   • 项目添加依赖前，要充分考虑你真的需要它
   • 不要自作聪明（you arent gonna need it)只有当你真正需要的时候才去实现某些逻辑，不要过度设计
3. 优化你的代码
   1. 找到现有代码中问题，尝试去解决，如果不好解决，至少添加一下注释（FIXME/TODO)
      • 函数有多个参数
      • 分支逻辑复杂难懂
      • 单文件代码行数过多
      • 有相同语法结构的重复代码
      • 组件内有大量函数、方法
      • 函数体代码过长
      • 函数、方法有过多return语句
      • 重构你的代码，简单永远比复杂好
   2. 重构你的代码，简单永远比复杂好
4. 一些小技巧
   • 你可能不需要把state放入deps,尝试使用callback function 或者dispatch，setState/dispatch 不需要出现在deps里，react保证它们不会改变
   • 如果useMemo或者useCallback 的deps为空，你可能错误的使用了它。（是否可以放到组件外）
   • 如果使用自定义context，在你定义的文件里导出一个使用这个context的自定义hook
   • 在写代码之前，先考虑你的组件如何被使用， README Driven Development，可以更好的设计你的组件api

合理的代码设计

• 避免冗余state,
• 组件间传递原始数据类型，避免传递引用类型
• 保持你的组件小而简单-单一职责原则
• 有时，选择重复而不是错误的抽象（避免过早、不恰当的概括）（sandimetz.com/blog/2016/1…
• 避免属性钻孔（prop drilling)，优先使用组合，而不是context
• 将庞大的useEffect拆分成小的独立的，职责单一的
• 将逻辑拆到自定义hook 和helper function 中
• useCallback, useMemo, useEffect尽量使用原始类型作为deps
• useCallback, useMemo, useEffect 应避免过多依赖
• 如果你的组件有过多的useState,他们之间还有依赖关系，考虑去使用useReducer
• Context组件要靠近使用它的组件，在组件树中的位置要尽可能低，同理，变量、注释、state 也要靠近他们被使用的地方

性能建议

• 如果你觉得应用渲染慢，不妨打开性能面板一探究竟
• useMemo 大多数情况下用在开销大的计算上面
• 如果你尝试使用React.memo, useMemo/useCallback来减少re-render,依赖项就应该比较少，并尽量是原始类型
• 在解决re-render 之前先解决slow render
• state 尽可能靠近使用它的地方，状态托管
• Context 职责保持单一，避免复杂；
• 可以通过分离context 中的state 和dispatch来优化
• 了解lazy loading 、code splittling