34.精读React代码整洁之道.md

034.精读《React 代码整洁之道》.md

编程也是艺术行为(-v-),在思考代码复用和变量命名的时候就是在为优雅的艺术做思考

优化整洁点

• 不冗余 ，避免重发代码段，对 JSX 同理，但是不要过度优化
• 可预测、可测试
• 自我解释- 通过变量名更语义化，减少注释复杂和潜在逻辑，提高可维护性，代码和注释同步性减少
• 斟酌变量名，对于一些布尔类型的函数命名，可以使用is has should开头
• 遵循设计模式，是开发中广泛的设计模式，比如一些 tslint 校验代码格式或者 ts 开启严格模式，将 React 作为 peerDependency 等
  • React 最佳实践
    1. 单一职责原则，确保每个功能完整完成一个功能，比如更细粒度的组件拆分，同时更利于测试
    2. 不要把组件内部依赖强加给使用方(组件数据流，依赖初始化数据流才能执行此组件)
    3. lint 规则尽量严格 (如果你是开源库作者，使用者 lint 规则强度比你还要高，那么你的组件没办法被别人使用了)
• 一开始编写整洁代码一定会放慢开发速度，因为需要转变自己的思维模式，后面的提升会弥补前面的损失，带来更好的开发效率的提升
• 组件库也是同理。函数式环境对于功能只需要写一遍，剩下的就是记住并且调用

React 中的实践

• React 使用 defaultProps 代替代码中的动态判断，通过判断加载的组件完全可以将里面的组件抽离出来单独编写，逻辑和渲染分离，便于维护也便于测试

• 提倡无状态(stateless)组件，其重点是阻碍内部状态的使用，对于生命周期的移除，提高了组件的可控性，拓宽组件的使用场景。

  • 受控组件和非受控组件都有其使用场景，对于非常基础的底层组件库，通常倾向提供两套机制，通过 value 和 defaultValue 决定是否受控 ，像这样能力的组件源码没办法通过无状态的形式编写，基础组件没必要完全无状态。

• 解构

  // dirty
  const splitLocale = locate.split('-')
  const language = splitLocale[0];
  const country = splitLocale[1];
  
  // clean
  const [language, country] = locate.split('-')

• 推荐在 TS 中开启 strict 模式，强制使用良好的开发习惯

• 不要信任回调函数给你的变量，因为随时是 undefined， 使用?.可选链可以安全访问属性，不过还得看 node 版本对于新语法的支持程度，对兼容进行升降级处理

summary

• 看了就回去思考下以前的代码然后进行重构把