设计模式概述

在应用中共享同一个全局实例

拦截和控制目标对象的交互

使数据可用于多个子组件

在相同类型的对象之间共享属性

从应用逻辑中分离视图以强制分离关注点

当一个事件发生时使用可观察对象通知观察者

将代码拆分得更小的并可重用

在无继承的情况下向对象或类添加功能

使用中介者对象处理组件间通信

将可重用逻辑作为属性传递给应用中的组件

通过属性将 JSX 元素传递给组件

使用函数在应用中的多个组件之间重用有状态逻辑

处理相同对象时重用现有实例

使用工厂函数创建对象

创建协同工作的多个组件以完成单一任务

向管理器发送命令来执行任务的解耦方法

经典的《JavaScript 设计模式》更新了 ES2015+ 语法

渲染模式概述

用于构建可重用用户界面组件的 UI 库

用于混合 React 应用的 Vercel 公司框架

在客户端渲染应用程序 UI

响应用户请求在服务端生成 HTML

在构建站点时生成预渲染的 HTML

构建站点后更新静态内容

延迟加载页面中不太重要的 JavaScript

响应用户请求在服务端生成 HTML

得益于 SSR 的服务端组件，渲染成无须打包的中间抽象

结合流式服务端渲染和注水的新方法

鼓励在服务器渲染的页面中使用小的、集中的交互单元

了解如何优化加载顺序以提高应用的可用速度

导入其他模块导出的代码

按需导入代码

当非关键组件在视口中可见时导入

当 UI 界面需要时导入非关键组件

根据当前路由动态加载组件

拆分代码为小而可复用的部分

通过预缓存、延迟加载和最小化往返优化初始加载

通过剔除无用代码来减小包大小

发现关键资源之前通知浏览器

获取并缓存可能即将被请求的资源

降低第三方库对站点性能的影响

利用列表虚拟化优化其性能

减少通过网络传输所需的时间