React 代码风格指南

2020-05-04 · 柯庆荣 · 15 分钟阅读

公司最近有个整理前端研发规范的政治任务，这里简单记录下目前社区已有的一些 React 代码风格的相关资源。

代码风格指南

Redux 风格指南

翻译自 https://redux.js.org/style-guide/style-guide/

必要的

  1. 不要改变 State（必须使用不可变数据）
  2. Reducer 函数不要有副作用。不要执行任何异步操作（Ajax、定时器、Promise），生成随机值（Date.now()、Math.random() ），在 Reducer 外修改变量，或者运行会影响 Reducer 作用域外的代码）
  3. 不要将不可序列化的值放到 State 或者 Action 中（如 Promise、Symbol、Map/Set、函数、类实例等）
  4. 一个应用只有一个 Redux Store

强烈推荐

  1. 使用 Redux Toolkit 编写 Redux 逻辑
  2. 使用 Immer 编写不可变数据更新
  3. 按功能组织文件结构，一个功能的所有文件放到一个文件夹下或者一个文件中
  4. 尽可能将逻辑放到 Reducer 中
  5. 拆分的 Reducer 应该只处理自己对应的 State
  6. 基于 Store 数据来命名、拆分 Reducer
  7. 把 Reducer 看作状态机
  8. 标准化复杂的嵌套的/关系型状态
  9. 把 Action 看作事件而不是 Setter
  10. 编写有意义的 Action 名称
  11. 允许多个 Reducer 响应同一个 Action
  12. 避免按序发送太多的 Action
  13. 评估每个 State 的存放位置
  14. 连接更多的组件从 Store 中读取数据
  15. 通过 connect 使用 mapDispatch 的对象简写形式
  16. 在函数组件中多次调用 useSelector
  17. 使用静态类型
  18. 使用 Redux DevTool 扩展来调试
  19. State 使用简单 JavaScript 对象

推荐

  1. Action 的类型写成 domain/eventName 形式
  2. 按照 Flux 标准 Action（Flux Standard Action，FSA）的约定编写 Action
  3. 使用 Action Creator
  4. 使用 Thunk 来处理异步逻辑
  5. 将复杂逻辑移到组件外部
  6. 使用 Selector 函数从 Store 中读取值
  7. 避免将表单状态放到 Redux 中

ESLint 插件

eslint-plugin-react-hooks

  • react-hooks/rules-of-hooks: 包括两条规则
    • 只在最顶层使用 Hook。不要在循环，条件或嵌套函数中调用 Hook
    • 只在 React 函数中调用 Hook。不要在普通的 JavaScript 函数中调用 Hook
  • react-hooks/exhaustive-deps: 检查副作用依赖

eslint-plugin-react

翻译自 https://github.com/yannickcr/eslint-plugin-react

React 规则

JSX 特定的规则

其他 ESLint 插件

参考链接

发邮件与我交流

上一篇：工作中遇到的一个 JavaScript 模块引用问题下一篇：从 Form 表单到 Ajax
© 2016 - 2024 Ke Qingrong