从源码理解 React Hook 是如何工作的

今天我们从源码来理解 React Hook 是如何工作的。

React 版本为 18.2.0

React Hook 是 React 16.8 后新加入的黑魔法,让我们可以 在函数组件内保存内部状态

阅读更多

长列表优化:用 React 实现虚拟列表

大家好,我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件。

虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样。

虚拟列表解决的长列表渲染大量节点导致的性能问题:

  1. 一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿;

  2. 即使渲染好了,大量的节点也持续占用内存。列表项下的节点越多,就越耗费性能。

虚拟列表的实现分两种,一种是列表项高度固定的情况,另一种是列表项高度动态的情况。

阅读更多

React 性能调试好帮手:useWhyDidYouUpdate

大家好,我是前端西瓜哥。

最近在尝试优化 React 组件,使用了 React.memo() 去缓存组件的渲染结果。

但有一个问题,就是要使 React.memo() 的缓存生效,需要保持 props 对象的浅比较结果为 true。

所以我们需要通过 useCallback 或 useMemo 处理一些对象类型的 prop,让它们保持指向原来的内存对象。

在 props 少的时候还好,但一旦多了之后,我们就比较难通过肉眼确认是哪个 prop 导致缓存失效。

怎样才能够方便地知道 props 的哪个属性发生了改变呢?

你可以试试 useWhyDidYouUpate。

阅读更多

React.memo 如何使用?

大家好,我是前端西瓜哥。

最近做的新功能有性能问题,所以我想尝试优化一下 React 组件的性能。下面我们来好好学习一下 React.memo 的用法。

阅读更多

在 React 中使用 Redux 的 4 种写法

Redux 是一种状态容器 JS 库,提供可预测的状态管理,经常和 React 配合来管理应用的全局状态,进行响应式组件更新。

Redux 一般来说并不是必须的,只有在项目比较复杂的时候,比如多个分散在不同地方的组件使用同一个状态。对于这种情况,如果通过 props 层层传递,代码会变得不可维护,这时候我们可以考虑使用 Redux 这类状态管理库。

阅读更多