这是我参与「第五届青训营」伴学笔记创作活动的第10天
如何提高React代码的可维护性
可分析性
目的:快速定位线上问题
预防
人工审查核心逻辑代码
工具审查
- ESLint
兜底
理想:改造编译流水线,在发布过程上传SourceMap到报错收集平台
实际:Mozilla的开源工具sourcemap,恢复对应源代码信息
可改变性
目标:代码易于拓展,业务易于迭代
方案
划分边界和模块隔离
组件设计模式:分离组件
状态管理框架:Redux边界清晰容易拆分
稳定性
目标:避免不必要的线上问题
方案
测试:前端单元测试主要有Chai,Mocha和Jest其中Jest与React生态最为紧密,由FaceBook主推一般选取业务核心逻辑编写测试是更有利于整体项目的稳定性
易测试性
目标:易于发现代码的潜在问题,合理的架构划分使得模块之间互不干涉,各自分离可以使测试相对独立
方案
纯函数在测试上有着得天独厚的优势,让测试验证过程变得更为简单,现在前端的一种思潮就是编写一个接一个的函数而比较少写类
可维护性的依从性
目标:提升代码的可阅读性
方案
统一编码规范和代码风格
ESLint:针对JavaScript
StyleLint:针对样式
CommitLint:针对代码提交
Pretter:针对代码风格
EditorConfig:针对编辑器风格的
React Hook 的使用限制有哪些？
设计初衷:改进React组件的开发模式
使用限制
不要在循环,条件或嵌套中调用Hook
在React的函数组件中调用hook
问题领域
组件之间难以复用状态逻辑
- 高阶组件
- render props
- 状态管理框架
复杂的组件变得难以理解
- 生命周期函数和业务逻辑耦合
- 组件关联部分难以拆分
人和机器都容易混淆类
- this
- 值捕获问题 -> 类熟悉草案
- 难以编译优化
如何规避:在ESlint中引入eslint-plugin-react-hooks完成自动化检查就行
useEffect和useLayoutEffect区别
共同点
使用方式
useEffect和useLayoutEffect函数签名相同源码调用同一个函数
mountEffectImpl
useEffect先调用mountEffect再调用mountEffectImpl
useLayoutEffect先调用mountLayoutEffect再调用mountEffectImpl一定程度上可以相互替代
运用效果
useEffect和useLayoutEffect两者都是用于处理副作用的,这些副作用包括改变Dom,设置订阅,操作定时器等
不同点
使用场景
大多数场景使用
useEffect,但代码引起页面闪烁的时候推荐使用useLayoutEffect如果有直接操作DOM样式或者引起DOM样式更新的场景推荐使用
useLayoutEffect
独有能力
useEffect异步处理副作用
useLayoutEffect同步处理副作用
设计原理
hooks列表中EffectHooks会有些不同,它涉及了一些额外的处理逻辑,每个FIber的Hooks队列中保存了Effect节点
每个Effect的类型都有可能不同,需要在合适的阶段去执行
useEffect: HookPassive
useLayoutEffect: HookLayout标记为HookLayout的Effect会在所有DOM变更的时候同步调用,所以可以使它来读取DOM布局并同步触发重渲染
计算量较大的耗时任务必然会造成阻塞,所依要根据实际情况酌情考虑使用
未来趋势:根据场景酌情选择
