对我们的下一本书感兴趣吗？了解更多关于 使用 React 构建大型 JavaScript Web 应用程序

社区模式

社区资源，涵盖 React、Angular、Vue 和 TypeScript 的模式

Advanced React Patterns
高级 React 模式
Angular Component Patterns
Angular 组件模式
TypeScript/React Component Patterns
TypeScript/React 组件模式
Web Component Patterns
Web 组件模式
Node.js Design Patterns
Node.js 设计模式
Clean Code JavaScript
整洁代码 JavaScript
Clean Code Angular
整洁代码 Angular
RxJs Reactive Patterns
RxJs 响应式模式

视频

精选推荐演讲列表

Rendering on the Web: Performance Implications of Application Architecture (Google I/O '19)
Web 上的渲染：应用程序架构的性能影响
CSR / SSR / SSG / ISR with Next.js – Explained!
CSR / SSR / SSG / ISR 与 Next.js – 解释！
Bringing Excellent UX to the React Ecosystem via Strong Defaults in Next.js
通过 Next.js 中强大的默认值，将出色的 UX 带入 React 生态系统
Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris, NYTimes
单页应用程序毁掉了 Web 吗？| 使用 Rich Harris 的过渡应用程序，NYTimes
Addy Osmani :: The Cost of JavaScript :: #PerfMatters Conference 2019
Addy Osmani :: JavaScript 的成本 :: #PerfMatters 会议
Lydia Hallie: JavaScript Visualized: A Script's Life
Lydia Hallie：JavaScript 可视化：脚本的生命
Malte Ubl - Designing very large JavaScript applications
Malte Ubl - 设计非常大型的 JavaScript 应用程序
Designing Even Larger (JavaScript) Applications - Malte Ubl | JSConf Hawaii 2020
设计更大规模的（JavaScript）应用程序 - Malte Ubl
CSR, SSR, and SSG on NextJS
CSR、SSR 和 SSG 在 NextJS 上
Optimise your code: load code at the right time
优化代码：在正确的时间加载代码
Building The New Facebook With React and Relay | Ashley Watkins
使用 React 和 Relay 构建新的 Facebook | Ashley Watkins
Keynote: Production Loading Performance 10 Years Later-Nicole Sullivan and Shubhie Panicker, Google
生产加载性能 10 年后 - Nicole Sullivan 和 Shubhie Panicker，Google
Code Splitting with React, React.lazy, and React Router v5
使用 React、React.lazy 和 React Router v5 进行代码拆分
How to analyze your JavaScript bundles
如何分析 JavaScript 包
Adaptive Loading - Improving web performance on slow devices (Chrome Dev Summit 2019)
自适应加载 - 提高慢速设备上的 Web 性能（Chrome Dev Summit）
Web Frameworks: SEO Mythbusting
Web 框架：SEO 揭穿神话
Loading performance - lessons from the trenches of the React ecosystem (BlinkOn 13)
加载性能 - 来自 React 生态系统战壕的经验教训（BlinkOn）
What is Incremental Static Regeneration? (ISR)
什么是增量静态再生？（ISR）
Next.js Image Component and Image Optimization
Next.js 图像组件和图像优化
Data Fetching with React Server Components
使用 React 服务器组件进行数据获取
Incrementally Adopting Next.js - Lydia Hallie
增量采用 Next.js - Lydia Hallie
Paul Irish :: Investigating LCP: Largest Contentful Paint :: #PerfMatters Conference 2020
Paul Irish :: Investigating LCP：最大内容绘制 :: #PerfMatters 会议
Web Performance Trivia - Lydia Hallie
Web 性能琐事 - Lydia Hallie
What is Server-Side Rendering? (Server-side Rendering with JavaScript Frameworks)
什么是服务器端渲染？（使用 JavaScript 框架进行服务器端渲染）
Progressive Rendering: Improve Performance on Slower Networks - Dinesh Pandiyan | JSConf Hawaii 2020
渐进式渲染：在较慢的网络上提高性能 - Dinesh Pandiyan | JSConf
Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O '19)
规模化速度：来自战壕的 Web 性能技巧和窍门
Beyond fast with new performance features
超越快速，使用新的性能功能
Yoav Weiss - Caches All the Way Down!
Yoav Weiss - 缓存一直到底！
Fast By Default: Modern Loading Best Practices (Chrome Dev Summit 2017)
默认快速：现代加载最佳实践（Chrome Dev Summit）
Patrick Meenan | HTTP/2 priorities | performance.now() 2019
Patrick Meenan | HTTP/2 优先级 | performance.now()
Harry Roberts: “More Than You Ever Wanted to Know About Resource Hints” — Clarity 2019
Harry Roberts：“关于资源提示，您想了解的一切” - Clarity
Optimize for interactivity using Web Vitals (FID/TBT)
使用 Web 指标（FID/TBT）优化交互性
Planning for Performance: PRPL (Chrome Dev Summit 2016)
性能规划：PRPL（Chrome Dev Summit）
How to convince your boss to fix technical debt in your React app by Paul Armstrong
如何说服您的老板修复 React 应用程序中的技术债务 - Paul Armstrong
How to use the React Profiler to find and fix Performance Problems
如何使用 React Profiler 查找和修复性能问题
How to optimize a React JS app bundle performance to load under 3s | Code splitting | Lazy loading
如何优化 React JS 应用程序包性能以在 3 秒内加载 | 代码拆分 | 延迟加载
Improving React App Performance : A Case Study
提高 React 应用程序性能：案例研究
Concurrent Rendering in React - Andrew Clark and Brian Vaughn - React Conf 2018
React 中的并发渲染 - Andrew Clark 和 Brian Vaughn - React Conf
Houssein Djirdeh: Progressive React / React Boston 2018
Houssein Djirdeh：渐进式 React / React Boston 2018
Use React.lazy and Suspense to Code-Split Your App
使用 React.lazy 和 Suspense 对您的应用程序进行代码拆分
Once you go PRPL... (Houssein Djirdeh)
一旦您开始使用 PRPL...(Houssein Djirdeh)
Nuxt Server, Nuxt Static, SSR true or false
Nuxt Server、Nuxt Static、SSR 真假
Monica Powell - Keeping Static Site Rendering Cool with React Hydration
Monica Powell - 使用 React Hydration 保持静态站点渲染酷炫
Making things fast in world of build tools by Surma & Jake Archibald | JSConf Budapest 2019
在构建工具的世界中使事物变得快速 - Surma & Jake Archibald | JSConf Budapest 2019
Moving To React Suspense - Jared Palmer - React Conf 2018
迁移到 React Suspense - Jared Palmer - React Conf
Web Performance Mini Series: Load
Web 性能迷你系列：加载
Web Performance Mini Series: Idle
Web 性能迷你系列：空闲
Rendering large lists with react-virtualized or react-window
使用 react-virtualized 或 react-window 渲染大型列表
90% Cleaner React With Hooks - Ryan Florence - React Conf 2018
使用 Hooks 使 React 更干净 90% - Ryan Florence - React Conf 2018
5 Design Patterns Every Engineer Should Know
每位工程师都应该知道的 5 种设计模式
React Today and Tomorrow and 90% Cleaner React With Hooks
今天的 React 和明天的 React 以及使用 Hooks 使 React 更干净 90%
“Animation on the Bleeding Edge” by Sarah Drasner—An Event Apart video
“边缘动画” - Sarah Drasner - An Event Apart 视频
Mastering Typescript for React Hooks - Live!
掌握 React Hooks 的 TypeScript - 直播！
React Advanced Patterns by Manjula Dube at FrontCon 2019
Manjula Dube 在 FrontCon 2019 上介绍的 React 高级模式
Let's Learn Modern Redux! (with Mark Erikson) — Learn With Jason
让我们学习现代 Redux！（与 Mark Erikson 一起） - Learn With Jason
Props from Child to Parent Component (Hack)
来自子组件到父组件的 Props（技巧）
Using React Hooks, Context and State
使用 React Hooks、Context 和 State
Mark Erikson: Hooks, HOCS, and Tradeoffs (⚡️) / React Boston 2019
Mark Erikson：Hooks、HOCS 和权衡（⚡️）/ React Boston 2019
Fun with React Hooks - Michael Jackson and Ryan Florence
React Hooks 乐趣 - Michael Jackson 和 Ryan Florence
Building Resilient Frontend Architecture • Monica Lent • GOTO 2019
构建弹性前端架构 • Monica Lent • GOTO 2019
Async React Hooks
异步 React Hooks

课程

精选推荐课程列表

A Tour of JavaScript & React Patterns
JavaScript & React 模式之旅

演示

电影应用程序

一个非平凡的学习应用程序，使用 Next.js、Angular 或 Nuxt.js 构建

电影应用程序是一个非平凡的演示应用程序，建立在 TMDB（电影数据库）API 之上。它具有多个路由和视图、身份验证、暗黑模式以及一系列性能优化。
Movies app

比较模式

比较多个 React.js 性能模式

直观比较编写 React.js 组件和加载组件的不同方法。方法包括静态和动态导入、流式渲染、渐进式水合、使用 Loadable Components 的 SSR 等等。
Patterns Compare

壁纸