前端快报8月

116 阅读1分钟

Frontend Web Performance: The Essentials [0]

这篇文章介绍前端页面渲染的过程,包括渲染的流程,优化的手段等。通过例子结合chrome的开发者工具给出优化的过程。

Frontend Web Performance: The Essentials [1]

这篇文章介绍浏览器的事件循环,包括宏任务,微任务等,通过将微任务与宏任务结合的方式可以实现宏任务的拆分。

The 10 Most Common JavaScript Issues Developers Face

这篇文章介绍了javascript中几个常见的问题点。比如this的确定、内存泄露、原型链等.

TypeScript: React useRef Hook

介绍React useRef Hook的文章. React提供了useCallback, useMemo来实现memoization能力,减少重复的计算。应该避免对应hook的滥用,在缓存大量计算逻辑的时候使用
useImperativeHandle可以实现父组件对子组件的方法调用。在使用useImperativeHandle的时候思考是否可以将逻辑抽离到store层处理
useRef可以用于存储值,改变useRef的值不需要重新渲染组件

工具

SVGR

SVGR通过svgo优化,svg内容解析将svg转化成React组件使用

react-intersection-observer

react-intersection-observer通过对IntersectionObserver的封装提供了react hook的方式来监听元素在视口中的位置

react-spring

react实现spring动画的库

想法

关于前端store设计

上期前端快报中聊到了前端的页面设计,要从数据逻辑去思考页面,实现数据逻辑和渲染逻辑的分离。 在对前端store(View-Model)的设计上,可以从页面的角度,去拆分通用模块,页面级别模块实现更好的数据逻辑与渲染逻辑的隔离.
storeDesign