react项目的集成能力，运用多种技术，集成开发一个好用的系统

  1. 不必事必躬亲，吃透每一个技术点
  2. 做项目的过程中，用心点，留意每个功能点，渐进式的学习，总结
  3. 知识就在那里，进一步，有一步的欢喜。
  4. 从性能优化、API 设计、权衡定制化需求和约定配置等验
  5. 灵活性方面不如手写实现的好，因为：框架隐藏的细节越来越多了，不仅要会用，还要懂实现原理
  6. 熟练掌握一个技术栈的生态圈，和开源组件
  7. 避免在遇到一些需求时，自己费了很大力气去实现，却发现原来早有开源的方案，合理的使用提高开发效率
  8. 开发效率往往是业务的第一需求。
    1. 一个产品拥有的市场机会转瞬即逝；
    2. 抢占市场依靠的是更快的开发速度和迭代速度

react最佳实践

最佳实践本质：减少出错的可能性，让业务低成本的试错；让创新更快的发生

  • 效率
  • 质量
  • 混合研发，lowcode & procode

蚂蚁前端研发最佳实践 https://zhuanlan.zhihu.com/p/94949118
Umi 前端最佳实践 https://www.bilibili.com/video/BV1Dh41127N3
antd pro最佳实践 https://pro.ant.design/zh-CN/blog/best-front0end
https://github.com/kudos-dude/react-best-practices
https://github.com/react-boilerplate/react-boilerplate

如何定制最佳实践

强约束，边界约束范围
package.json，版本号用：~ 波浪线代替 ^ 尖括号

代码组织结构
1.jpg

定制插件
image.png

网站最佳实践

jamstack 架构
image.png

react开源库

  1. moment.js
    1. 一个 JavaScript 日期处理类库
    2. 用于解析、检验、操作、以及显示日期
  2. classnames
    1. 拼接 class 的各种场景
  3. lodash
    1. 非常擅长数据结构的各种转换，支持 nodejs服务端
    2. 提供了非常多的工具函数
  4. nunjucks 模板引擎

hooks开源库

  • ahooks
  • react-use

数据流

  • redux
  • dvajs
  • react-query
  • swr

如何选择开源库

  1. 项目的作者是很认真地去提供开源产品，
    1. 比如有完善的文档、充分的测试，
    2. 以及及时的 Bug 修复速度
    3. 通常来说，只有这样才能做出可靠的产品。
  2. 要全面了解选择的开源项目。
    1. 如果你只是用到了一小部分内容，那么就要看它是否提供了模块化的机制，
    2. 让你可以只使用其中的一部分，否则就会让你的项目越来越大。
  3. 把Github Star 和 npm 下载量作为参考指标
    1. 通常来说，越流行的项目也意味着更高的质量。如果一个项目开源了很久，
    2. 而每周却只有几十个下载量，那你就要慎重考虑了

业务场景最佳实践

解决实际业务问题的思考方式

  1. Form
  2. Table
  3. List
  4. 可视化
  5. 错误处理，错误边界
  6. 异步处理
  7. 代码按需加载
  8. 组件复杂的状态处理
  9. 函数组件的设计模式
    1. 事件机制
    2. 观察者模式
    3. 发布订阅模式
  10. 拆分复杂业务

工程化

  1. 项目结构
  2. 本地开发
    1. 环境变量
    2. config可配置化，灵活性，避免硬编码
  3. 打包部署优化
  4. 单元测试
  5. CICD

react核心原理

  1. 组件
  2. 状态，state & props
  3. jsx
  4. hooks
    1. 自定义 hooks
    2. hooks的好处，逻辑复用，关注点分离
  5. 生命周期函数
  6. class组件