跳到主要内容

React

缓存优化 memo

pureComponent shouldComponentUpdate React.memo

前两个供类组件使用,React.memo 供函数式组件使用,是一个高阶组件,通过包裹函数返回一个新组件 浅比较 props 不改变则不重新渲染

pureComponent 即将 shouldComponentUpdate 设定为浅比较 props 的父组件

React 18 新特性

Concurrent Rendering 并发渲染

Concurrency 是 React 18 的关键词,可以理解成是一种背后的机制,保证 React 能够同时准备多套 UI。

具体到表现上区别于以往的最大的特点就是渲染是可中断的。

这意味着当你的应用正在进行复杂更新的时候,仍然可以与页面进行交互,保证一个流畅的用户体验。

既然是一种背后的机制,实际上开发者并非需要先学习并发渲染才能使用 React18,但是能够掌握并发渲染对于新特性的理解有非常大的作用。

核心实现是通过组件作为一个基本的工作单元将一个大的更新任务进行拆分,然后以时间切片的方式,分布在不同的时间片来执行,每个时间片执行完成后都会主动释放控制权,使得浏览器能够处理其它用户事件。而具体时间片上执行哪个任务是由任务上的相关优先级决定的,当高优先级的更新到来时,会中断旧的更新,优先执行高优先级更新,待完成后继续执行低优先级更新。