React 19 深入浅出, 构建生产级React应用程序 Learn React 19 with Epic React v2/进行中 #204
Comments
1 React基础001 介绍使用 HTML 和 JavaScript 实现 Hello World要在 HTML 中实现一个 "Hello World"，其实并不复杂。你只需要创建一个简单的 HTML 文档，使用 但如果你想通过 JavaScript 实现 "Hello World"，也不会特别复杂。这是你第一次接触如何使用 JavaScript 与页面互动，并创建动态和交互式用户体验的入口。 要在页面上添加 JavaScript，可以使用 学习目标在这个练习中，我们的重点是学习以下内容：
可以通过访问 MDN DOM 文档 来了解更多关于 DOM 的信息。DOM 是从 JavaScript 在 Web 诞生之初就存在的一部分，通过 DOM，我们能够与页面进行交互。 尽管直接操作 DOM 可能有点混乱，但现代 JavaScript 和 DOM 的操作已经变得非常简洁高效。你可以使用这些技术构建一些不错的用户体验。当然，像 React 这样的框架提供了更多的功能，帮助我们更方便地进行复杂应用的开发，但在这个练习中，我们的重点是了解 DOM 的基础知识。 练习目标通过本次练习，你将学会使用 JavaScript 直接在 DOM 上实现 "Hello World"，为之后深入学习 React 和其他高级工具打下坚实的基础。 002 在JS中实现Hello World第一步：使用 JavaScript 和 HTML 创建 Hello World在本次练习的第一步中，我们将使用 JavaScript 在 HTML 中创建一个 "Hello World"。当你完成后，页面应简单显示 "Hello World"，如同示例中那样。 你可以按照以下步骤进行操作：
这是一项非常基础的练习，指引会帮助你完成，祝你玩得开心！ 003 在JS中实现Hello World (1)这个视频讲解了如何使用JavaScript和DOM API在HTML中创建一个“Hello World”的示例。以下是关键步骤的总结：
通过这些步骤，你可以使用JavaScript和DOM操作技术，动态地在网页上创建并追加元素，实现“Hello World”的显示。 004 生成根节点这段视频介绍了一个新的练习，目的是让你更深入地理解如何使用JavaScript操作DOM。与之前的练习不同，这次我们将完全用JavaScript生成根元素，而不是依赖于HTML预先定义的元素。以下是视频的主要内容：
练习的核心是完全通过JavaScript操控页面结构，摆脱对HTML的依赖，增强对动态DOM操作的理解。 005 生成根节点 (1)在这段视频中，主要讲解了如何使用JavaScript动态创建并添加HTML元素到DOM中，以下是视频的核心内容总结：
这段视频的目的是展示如何通过JavaScript操控DOM，创建并修改页面元素，帮助理解如何在动态网页中使用JavaScript进行基本的DOM操作。 006 爸爸笑话时间在这段视频中，介绍了一个轻松的休息时间。讲者强调了在学习过程中定期休息的重要性，帮助大脑吸收和巩固所学内容。视频还分享了一个轻松的笑话：
之后，讲者提醒观众保持充足的水分，并鼓励大家利用这段时间稍作休息，为接下来的学习做好准备。 007 原生React API简介这段视频介绍了如何在引入React的基础上，通过不使用JSX的方式，使用原生React API创建一个简单的"Hello World"应用。讲者首先解释了React是基于传统的
视频的目的是引导开发者通过逐步学习React的底层API，最终理解React如何简化开发工作，并逐步深入React的使用。 008 创建React元素在这个练习中，我们将React和React DOM引入页面，并使用它们的 在这个简单的练习中，我们的目标是通过React的声明式API（如 你可以通过查看项目仓库中的公共目录来了解如何加载React和React DOM库，并使用它们来创建页面元素。希望你在这次练习中有所收获！ 009 创建React元素 (1)在这个示例中，我们展示了如何使用React和React DOM将元素渲染到页面上。首先，我们通过 React元素只是一个UI描述符，它不是直接的DOM元素。因此，我们还需要通过React DOM中的
最后的效果是在页面上显示一个带有"Hello World"文本的 这是React基本工作原理的一个很好的演示，展示了从UI描述符（React元素）到实际DOM渲染的流程。 010 嵌套元素在这个练习中，我们将处理多个子元素并确保它们之间的空格正确显示。具体来说，我们会在一个React元素中创建两个 目标：
解决方案：React允许我们将多个子元素传递给一个父元素，而不仅限于单个子元素。要实现这个需求，我们可以通过创建两个 示例代码如下： import React from 'react';
import ReactDOM from 'react-dom/client';
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
const element = React.createElement(
'div',
null,
React.createElement('span', null, 'Hello'),
' ', // 这是我们用来添加空格的部分
React.createElement('span', null, 'World')
);
root.render(element);说明：
最终效果是页面上显示"Hello World"，并且"Hello"和"World"之间有一个空格。 这个练习展示了如何在React中使用多个子元素，并处理它们之间的布局问题。 011 嵌套元素 (1)在这个练习中，我们使用 React 的 关键步骤：
以下是完整代码： import React from 'react';
import ReactDOM from 'react-dom/client';
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
const element = React.createElement(
'div',
null,
React.createElement('span', null, 'Hello'),
' ', // 这是用来添加空格的字符串
React.createElement('span', null, 'World')
);
root.render(element);解析：
注意点：
通过这种方式，我们可以确保在页面上正确显示“Hello World”，并且“Hello”和“World”之间有一个空格。 012 深度嵌套元素在这个练习中，我们将使用 <div class="container">
<p>Some text here</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>任务描述：
代码实现：import React from 'react';
import ReactDOM from 'react-dom/client';
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
// 创建包含嵌套元素的结构
const element = React.createElement(
'div',
{ className: 'container' }, // 父 div 容器
React.createElement('p', null, 'Some text here'), // p 标签
React.createElement(
'ul',
null,
React.createElement('li', null, 'Item 1'), // li 项目1
React.createElement('li', null, 'Item 2'), // li 项目2
React.createElement('li', null, 'Item 3') // li 项目3
)
);
// 渲染到页面
root.render(element);解析：
总结：虽然这个结构不算特别复杂，但通过这种方式嵌套多个 这个练习让我们理解 013 深度嵌套元素 (1)在这个练习中，我们使用了 代码实现import React from 'react';
import ReactDOM from 'react-dom/client';
// 获取 root 元素
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
// 使用 createElement 创建嵌套的 UI 结构
const element = React.createElement(
'div',
{ className: 'container' },
React.createElement('p', null, "Sam's favorite food"), // p 标签
React.createElement(
'ul',
{ className: 'sams-food' }, // ul 列表，带有 className 属性
React.createElement('li', null, 'Green eggs'), // li 项目1
React.createElement('li', null, 'Ham') // li 项目2
)
);
// 渲染到页面
root.render(element);解析：
总结：虽然 通过这个练习，你已经学会了如何使用 014 爸爸笑话时间 原生React API哈哈，那个笑话真是让人忍俊不禁！抓住一个放了一个，真是个有趣的双关。希望这个小休息能让你放松一下，记得保持水分和适当休息哦！当你准备好了，我们会继续学习更多的 React 知识，深入探索这个强大的框架，掌握更多有趣的技巧！ 015 使用JSX简介JSX 确实为 React 编写用户界面带来了很大的方便，它使得我们可以以接近 HTML 的语法编写代码，而不必通过复杂的 React 团队创建了 JSX 语法，它本质上是一种让你在 JavaScript 中写 XML 类似的语法，JSX 然后会通过编译器（如 Babel）转换为 React 的 为了保持事情简单，React 的 JSX 编译器 Babel 可以在浏览器中直接运行，因此我们可以避免使用复杂的构建工具。在本次练习中，你将学习如何在浏览器中通过引入 Babel 来编写 JSX 语法，并了解 JSX 是如何转换为 在这项练习中，你将体验到 JSX 的强大和简洁性，让编写 UI 变得更加高效流畅。准备好了吗？让我们一起开始学习 JSX 吧！ 016 编译JSX在这个练习中，我们将把 Babel 添加到页面中，并将 首先，我们需要在页面中引入 Babel，这次我们会使用 Babel 的单独版本（Babel standalone），它是一个打包好的单个脚本，可以直接在浏览器中加载并执行。通过这个脚本，Babel 会在页面中查找具有特定 具体步骤如下：
这个过程让你能够直观地了解 JSX 如何转换为常规的 JavaScript 调用，虽然这种方式不常用于生产环境，但它能帮助你在没有构建工具的情况下运行 React 项目。 祝你练习愉快！ 017 编译JSX (1)在这个练习中，我们已经成功地将 Babel 添加到页面中，并且将
接下来，我们可以继续探索 JSX 的更多特性和强大之处，并且通过这些练习加深对 React 的理解。 018 插值在这个练习中，我们讨论了插值（Interpolation）的概念，特别是在 JSX 中的应用。在 React 和 JSX 中，插值是将 JavaScript 代码嵌入到 JSX 表达式中的一种方式，这与在模板字符串（Template Literal）中的插值非常类似。 关键点回顾：
总结：插值是 React 和 JSX 的重要特性，它使得我们可以轻松地将动态数据插入到组件中，使得我们的 UI 更加灵活和可复用。在接下来的练习中，你将能够实践这些插值的技巧，从而进一步掌握它们的应用。 019 插值 (1)在这个练习中，我们讨论了如何在 JSX 中进行插值（Interpolation），特别是在 JSX 和 JavaScript 之间切换的方式。 关键点总结：
通过这些概念的掌握，你将能够更好地在 JSX 中处理动态内容和属性，使得你的 React 应用更加灵活和强大。 020 Spread props在这个练习中，我们介绍了如何将一个包含多个属性的对象应用到 JSX 元素上，而无需单独为每个属性进行手动设置。你可能会经常遇到这种情况，尤其是在属性动态生成或者属性数量较多的场景下。 使用属性对象的传统方式：假设我们有一个 const props = {
className: "container",
children: "Hello World",
};
return (
<div className={props.className}>
{props.children}
</div>
);这需要你逐个指定对象中的属性，例如 更优雅的方式——使用 JSX 的 Spread 属性：为了避免手动传递每个属性，JSX 提供了一种更简洁的方法，即 属性扩展语法，类似于 JavaScript 中的 扩展操作符。你可以通过 const props = {
className: "container",
children: "Hello World",
};
return (
<div {...props} />
);工作原理：
<div className="container">Hello World</div>使用场景：这种写法特别适合以下场景：
通过使用这种方式，你可以更轻松地处理具有多个属性的 JSX 元素。 021 Spread props (1)在这个练习中，我们探讨了如何在 JSX 中使用扩展语法将一个对象中的所有属性应用到某个元素上。这种方式对于处理动态属性或者复杂的属性集合时非常有用。 扩展操作符的工作原理我们可以使用 const props = {
className: "container",
children: "Hello World",
};
return <div {...props} />;这段代码会将 <div className="container">Hello World</div>覆盖属性扩展操作符的一个关键点是属性覆盖。如果你在展开属性对象后又指定了同名的属性，那么 JSX 会采用后面定义的属性值。例如： const props = {
className: "container",
children: "Hello World",
};
return <div {...props} className="my-container" />;在这个例子中， 输出的结果是： <div class="my-container">Hello World</div>特殊的
|
2 React钩子001 React钩子简介这段内容介绍了即将进入的React Hooks的学习内容，通过一些实际的应用示例展示了React Hooks在创建动态和交互式应用中的作用。 主要内容：
最终，这段内容激励你开始学习，并鼓励大家通过React Hooks构建更加灵活、动态的应用。 002 UI状态管理简介这段内容详细介绍了React应用的生命周期及如何通过React Hooks来管理状态，特别是通过 主要内容：
最后，内容预告了即将开始的练习，将结合实际项目（如博客搜索）进一步理解这些概念。 003 useState这段内容描述了一个练习任务，目标是实现一个能够实时搜索博客文章的React应用。当前UI已经构建好，但输入框还没有与状态同步，因此在用户输入搜索内容时没有任何响应。 任务要点：
任务步骤：
开发者还可以通过一个额外的挑战来增强React组件和UI生成的实践：删除现有的代码并从头构建整个UI，练习如何从零构建React组件。 完成目标：
004 useState (1)这段内容介绍了如何在React应用中使用
总结通过使用 这种模式广泛适用于React应用的各种场景，使得开发者能够轻松创建动态和交互式的用户界面。 005 控制输入这段视频内容讲解了受控输入（Controlled Input）的概念，以及如何在React中通过编程方式控制输入值。下面是关键点总结： 1. 受控输入的概念：
2. 问题警告：
3. 编程控制输入：
4. 例子：通过复选框控制输入：
总结：受控输入是React中常见的模式，允许开发者精确控制输入框的值，并根据需要进行编程处理。在React应用中，特别是当你需要自动填充或根据其他用户交互动态更改输入框内容时，受控输入非常有用。 006 控制输入 (1)这段内容详细介绍了如何在React中使用受控输入（controlled input）来确保复选框与查询输入框的同步更新。以下是关键步骤和要点的总结： 1. 目标：
2. 不受控输入的实现：
3. 将输入框设置为受控输入：
4. 如何使受控输入起作用：
5. 受控输入的好处：
6. 改进与调整：
总结：在这个练习中，学会了如何使用受控输入来控制用户界面的输入行为，特别是在用户与复选框交互时如何动态更新输入框的值。这是React中处理复杂状态和用户交互的一个非常重要的模式。 007 推导状态在这一段内容中，主要介绍了如何使用派生状态（derived state）来解决当前复选框与查询框同步的问题。当用户在输入框中手动输入标签时，复选框的选中状态没有同步更新，反之亦然，因此需要通过派生状态来确保复选框的状态与查询输入框的内容保持一致。 问题描述：当前，复选框和输入框能够互相影响，但是如果手动在输入框中输入“dog”或“cat”，相应的复选框不会自动选中，这会导致用户体验的困惑。为了解决这个问题，我们需要根据查询字符串来动态派生复选框的选中状态。 解决思路：派生状态派生状态的核心思想是根据现有的状态来计算新的状态，而不是独立管理多个状态。具体到这个场景，就是从查询输入框的内容派生出复选框的选中状态，而不是手动单独管理复选框的状态。 步骤：
代码示例：const [query, setQuery] = useState('');
// 根据查询字符串派生复选框的选中状态
const isDogChecked = query.includes('dog');
const isCatChecked = query.includes('cat');
const isCaterpillarChecked = query.includes('caterpillar');
// 处理复选框的点击事件
const handleCheck = (tag, checked) => {
if (checked) {
setQuery(query + ' ' + tag);
} else {
setQuery(query.replace(tag, '').trim());
}
};
// 渲染复选框并根据查询字符串设置复选框状态
return (
<div>
<input type="checkbox" checked={isDogChecked} onChange={(e) => handleCheck('dog', e.target.checked)} /> Dog
<input type="checkbox" checked={isCatChecked} onChange={(e) => handleCheck('cat', e.target.checked)} /> Cat
<input type="checkbox" checked={isCaterpillarChecked} onChange={(e) => handleCheck('caterpillar', e.target.checked)} /> Caterpillar
<input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
</div>
);关键点：
总结：通过派生状态，我们能够确保复选框的状态与查询输入框内容保持一致，无论用户是手动输入还是勾选复选框，都能看到预期的结果。这种方式避免了管理多个冗余状态，代码更加简洁且易于维护。 008 推导状态 (1)这一部分讲解了如何通过派生状态（derived state）来解决复选框的状态与查询输入框的同步问题。派生状态的思路是在已有状态的基础上进行计算，以确保UI的不同部分保持同步。具体操作是将查询字符串拆分为单词数组，并根据这些单词数组动态确定复选框的选中状态。 实现步骤：
完整示例代码：const [query, setQuery] = useState('');
// 派生单词数组
const words = query.split(' ');
// 派生复选框的状态
const isDogChecked = words.includes('dog');
const isCatChecked = words.includes('cat');
const isCaterpillarChecked = words.includes('caterpillar');
// 处理复选框点击事件
const handleCheck = (tag, checked) => {
if (checked) {
setQuery(prev => prev + ' ' + tag);
} else {
setQuery(prev => prev.replace(tag, '').trim());
}
};
// 渲染复选框并根据查询字符串设置状态
return (
<div>
<input type="checkbox" checked={isDogChecked} onChange={(e) => handleCheck('dog', e.target.checked)} /> Dog
<input type="checkbox" checked={isCatChecked} onChange={(e) => handleCheck('cat', e.target.checked)} /> Cat
<input type="checkbox" checked={isCaterpillarChecked} onChange={(e) => handleCheck('caterpillar', e.target.checked)} /> Caterpillar
<input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
</div>
);关键点：
总结：派生状态是一种非常强大的方法，可以减少状态管理的复杂性。通过在当前状态的基础上动态生成新状态，可以确保应用程序的不同部分始终保持同步，从而提升用户体验和代码的可维护性。 009 初始化状态这个部分讲解了如何在React应用中通过URL查询字符串来初始化应用的状态，使应用的状态可以被分享。当我们希望用户能够通过URL分享他们的查询内容（如： 实现步骤：
完整示例代码：import React, { useState } from 'react';
const App = () => {
// 从URL中获取查询参数
const params = new URLSearchParams(window.location.search);
const initialQuery = params.get('query') || '';
// 使用查询字符串初始化状态
const [query, setQuery] = useState(initialQuery);
// 派生状态
const words = query.split(' ');
const isDogChecked = words.includes('dog');
const isCatChecked = words.includes('cat');
const isCaterpillarChecked = words.includes('caterpillar');
// 处理复选框的变化
const handleCheck = (tag, checked) => {
if (checked) {
setQuery(prev => prev + ' ' + tag);
} else {
setQuery(prev => prev.replace(tag, '').trim());
}
};
return (
<div>
<input
type="checkbox"
checked={isDogChecked}
onChange={(e) => handleCheck('dog', e.target.checked)}
/> Dog
<input
type="checkbox"
checked={isCatChecked}
onChange={(e) => handleCheck('cat', e.target.checked)}
/> Cat
<input
type="checkbox"
checked={isCaterpillarChecked}
onChange={(e) => handleCheck('caterpillar', e.target.checked)}
/> Caterpillar
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
</div>
);
};
export default App;关键点：
总结：通过这种方式，React应用能够根据URL中的查询参数初始化状态，确保应用状态的可分享性。这对于创建动态且易于分享的用户界面非常有用。 010 初始化状态 (1)这一段讲解了如何基于URL查询字符串（如 关键点：
实现示例：import React, { useState } from 'react';
const App = () => {
// 从URL中获取查询参数
const params = new URLSearchParams(window.location.search);
const initialQuery = params.get('query') || '';
// 用查询字符串初始化状态
const [query, setQuery] = useState(initialQuery);
// 派生状态
const words = query.split(' ');
const isDogChecked = words.includes('dog');
const isCatChecked = words.includes('cat');
const isCaterpillarChecked = words.includes('caterpillar');
// 处理复选框变化
const handleCheck = (tag, checked) => {
if (checked) {
setQuery(prev => prev + ' ' + tag);
} else {
setQuery(prev => prev.replace(tag, '').trim());
}
};
return (
<div>
<input
type="checkbox"
checked={isDogChecked}
onChange={(e) => handleCheck('dog', e.target.checked)}
/> Dog
<input
type="checkbox"
checked={isCatChecked}
onChange={(e) => handleCheck('cat', e.target.checked)}
/> Cat
<input
type="checkbox"
checked={isCaterpillarChecked}
onChange={(e) => handleCheck('caterpillar', e.target.checked)}
/> Caterpillar
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
</div>
);
};
export default App;进一步优化：
总结：通过这种方法，可以根据URL中的查询参数动态初始化组件状态，使得页面内容与URL保持同步，提供了方便的状态分享和持久化功能。这在构建动态、可分享的用户界面时非常有用。 011 初始化回调这段讲解了如何优化 关键点：
示例代码：import React, { useState } from 'react';
const App = () => {
// 定义一个函数来获取初始查询参数
const getInitialQuery = () => {
const params = new URLSearchParams(window.location.search);
return params.get('query') || '';
};
// 使用 useState，传递函数作为初始值参数
const [query, setQuery] = useState(getInitialQuery);
// 处理输入框的变化
const handleInputChange = (event) => {
setQuery(event.target.value);
};
return (
<div>
<input
type="text"
value={query}
onChange={handleInputChange}
/>
</div>
);
};
export default App;重点：
优化提示：虽然这种方式提高了性能，但如果初始计算非常复杂并影响页面的首次加载速度，应该考虑进一步优化该计算的性能或异步执行，以避免影响用户体验。 总结：这种将初始值计算封装到函数中的方式，适用于需要进行复杂或耗时计算的场景，它能确保计算只在必要时进行，避免浪费性能。 012 初始化回调 (1)在这个视频里，重点是如何通过将 核心思路：
代码示例：import React, { useState } from 'react';
const App = () => {
// 创建一个懒初始化函数，只有在组件初次渲染时才调用
const getQueryParam = () => {
const params = new URLSearchParams(window.location.search);
return params.get('query') || '';
};
// 使用懒初始化函数作为 useState 的参数
const [query, setQuery] = useState(getQueryParam);
// 处理输入框的变化
const handleInputChange = (event) => {
setQuery(event.target.value);
};
return (
<div>
<input
type="text"
value={query}
onChange={handleInputChange}
/>
</div>
);
};
export default App;重点：
实现效果：
结论：通过懒初始化，可以避免在每次组件重新渲染时进行不必要的计算，从而优化性能。这种技术特别适合在计算量大或较为复杂的场景中使用。 013 爸爸笑话时间 UI状态管理014 副作用简介好的，我们来深入了解一下 以下是
提供的示意图帮助我们了解 在这个练习中，我们需要确保 URL 中的查询参数与 React 组件中的搜索状态保持同步。虽然在实际应用中通常由路由器处理这一任务，但通过自己实现可以帮助更好地理解副作用是如何工作的，以及如何与外部状态进行同步。 现在让我们开始使用 015 useEffect任务：使用
|
3 高级React API1 高级React API简介2 高级状态管理简介3 新状态_问题4 新状态_解决方案5 以前的状态_问题6 以前的状态_解决方案7 状态对象_问题8 状态对象_解决方案9 动作函数_问题10 动作函数_解决方案11 传统Reducer_问题12 传统Reducer_解决方案13 现实场景_问题14 现实场景_解决方案15 爸爸笑话时间 高级状态管理16 状态优化简介17 优化状态更新_问题18 优化状态更新_解决方案19 爸爸笑话时间 状态优化20 自定义钩子简介21 钩子函数_问题22 钩子函数_解决方案23 useCallback_问题24 useCallback_解决方案25 爸爸笑话时间 自定义钩子26 共享上下文简介27 上下文提供者_问题28 上下文提供者_解决方案29 上下文钩子_问题30 上下文钩子_解决方案31 爸爸笑话时间 共享上下文32 门户简介33 createPortal_问题34 createPortal_解决方案35 爸爸笑话时间 门户36 布局计算简介37 useLayoutEffect_问题38 useLayoutEffect_解决方案39 爸爸笑话时间 布局计算40 命令式处理简介41 useImperativeHandle_问题42 useImperativeHandle_解决方案43 爸爸笑话时间 命令式处理44 焦点管理简介45 flushSync_问题46 flushSync_解决方案47 爸爸笑话时间 焦点管理48 同步外部状态简介49 useSyncExternalStore_问题50 useSyncExternalStore_解决方案51 创建存储实用程序_问题52 创建存储实用程序_解决方案53 处理服务器渲染_问题54 处理服务器渲染_解决方案55 爸爸笑话时间 同步外部状态56 高级React API结束 |
4 React Suspense1 数据获取简介2 抛出Promise_问题3 抛出Promise_解决方案4 错误处理_问题5 错误处理_解决方案6 正式状态_问题7 正式状态_解决方案8 实用工具_问题9 实用工具_解决方案10 使用React_问题11 使用React_解决方案12 爸爸笑话时间 数据获取13 动态Promise简介14 Promise缓存_问题15 Promise缓存_解决方案16 useTransition_问题17 useTransition_解决方案18 挂起闪烁_问题19 挂起闪烁_解决方案20 爸爸笑话时间 动态Promise21 乐观UI简介22 乐观UI_问题23 乐观UI_解决方案24 表单状态_问题25 表单状态_解决方案26 多步操作_问题27 多步操作_解决方案28 爸爸笑话时间 乐观UI29 Suspense图像组件简介30 图像组件_问题31 图像组件_解决方案32 图像错误边界_问题33 图像错误边界_解决方案34 Key属性_问题35 Key属性_解决方案36 爸爸笑话时间 Suspense图像37 响应式简介38 useDeferredValue_问题39 useDeferredValue_解决方案40 爸爸笑话时间 响应式41 优化简介42 并行加载_问题43 并行加载_解决方案44 服务器缓存_问题45 服务器缓存_解决方案46 爸爸笑话时间 优化47 React Suspense结束 |
5 高级React模式1 高级React模式简介2 组合简介3 组合和布局组件_问题4 组合和布局组件_解决方案5 爸爸笑话时间 组合6 最新Ref简介7 最新Ref_问题8 最新Ref_解决方案9 爸爸笑话时间 最新Ref10 复合组件简介11 复合组件_问题12 复合组件_解决方案13 复合组件验证_问题14 复合组件验证_解决方案15 爸爸笑话时间 复合组件16 插槽简介17 插槽上下文_问题18 插槽上下文_解决方案19 通用插槽组件_问题20 通用插槽组件_解决方案21 插槽Prop_问题22 插槽Prop_解决方案23 爸爸笑话时间 插槽24 Prop集合和Getters简介25 Prop集合_问题26 Prop集合_解决方案27 Prop Getters_问题28 Prop Getters_解决方案29 爸爸笑话时间 Prop集合和Getters30 状态初始化器简介31 初始化切换_问题32 初始化切换_解决方案33 稳定性_问题34 稳定性_解决方案35 爸爸笑话时间 状态初始化器36 状态Reducer简介37 状态Reducer_问题38 状态Reducer_解决方案39 默认状态Reducer_问题40 默认状态Reducer_解决方案41 爸爸笑话时间 状态Reducer42 控制属性简介43 控制属性_问题44 控制属性_解决方案45 爸爸笑话时间 控制属性46 高级React模式结束 |
6 React性能优化1 React性能优化简介2 元素优化简介3 重用元素_问题4 重用元素_解决方案5 元素Props_问题6 元素Props_解决方案7 上下文_问题8 上下文_解决方案9 元素记忆化_问题10 元素记忆化_解决方案11 组件记忆化_问题12 组件记忆化_解决方案13 爸爸笑话时间 元素优化14 优化上下文简介15 上下文记忆化_问题16 上下文记忆化_解决方案17 提供者组件_问题18 提供者组件_解决方案19 分割上下文_问题20 分割上下文_解决方案21 爸爸笑话时间 优化上下文22 并发渲染简介23 useDeferredValue + memo_问题24 useDeferredValue + memo_解决方案25 爸爸笑话时间 并发渲染26 代码拆分简介27 lazy_问题28 lazy_解决方案29 预加载_问题30 预加载_解决方案31 过渡_问题32 过渡_解决方案33 爸爸笑话时间 代码拆分34 高耗计算简介35 useMemo_问题36 useMemo_解决方案37 Web Worker_问题38 Web Worker_解决方案39 异步结果_问题40 异步结果_解决方案41 爸爸笑话时间 高耗计算42 渲染优化简介43 组件记忆化_问题44 组件记忆化_解决方案45 自定义比较器_问题46 自定义比较器_解决方案47 原始类型_问题48 原始类型_解决方案49 爸爸笑话时间 渲染优化50 窗口化简介51 Virtualizer_问题52 Virtualizer_解决方案53 爸爸笑话时间 窗口化54 React性能优化结束 |
7 React服务器组件1 React服务器组件简介2 热身简介3 静态React应用_问题4 静态React应用_解决方案5 爸爸笑话时间 热身6 服务器组件简介7 服务器组件_问题8 异步组件_问题9 异步组件_解决方案10 流式传输_问题11 流式传输_解决方案12 服务器上下文_问题13 服务器上下文_解决方案14 爸爸笑话时间 服务器组件15 客户端组件简介16 Node.js加载器_问题17 Node.js加载器_解决方案18 模块解析_问题19 模块解析_解决方案20 爸爸笑话时间 客户端组件21 客户端路由简介22 客户端路由_问题23 客户端路由_解决方案24 挂起UI_问题25 挂起UI_解决方案26 竞争条件_问题27 竞争条件_解决方案28 历史_问题29 历史_解决方案30 缓存_问题31 缓存_解决方案32 爸爸笑话时间 客户端路由33 服务器操作简介34 操作引用_问题35 操作引用_解决方案36 客户端_问题37 客户端_解决方案38 服务器_问题39 服务器_解决方案40 重新验证_问题41 重新验证_解决方案42 历史重新验证_问题43 历史重新验证_解决方案44 爸爸笑话时间 服务器操作45 React服务器组件结束 |
8 额外：专家访谈1 与Aakansha Doshi讨论如何进入开源2 Aurora Scharff讲解如何使用React 19增强表单3 Jenna Smith谈AI、Radix构建和Tokenami4 Evan Bacon将React服务器组件引入React Native5 Kateryna Porshnieva讲解如何使用React 19构建无障碍应用6 Lee Robinson讲述React的演变：过去、现在与未来7 Matt Brophy谈Remix、React Router和开源8 Michelle Beckles谈社区建设和开发者健康9 Rick Hanlon讲解React 19的内幕10 Sam Selikoff谈React在现代Web开发中的影响11 Lydia Hallie讨论JavaScript、React和Web开发的未来12 Sebastian Silbermann讲解React 19的测试、工具和过渡13 Shruti Kapoor讲述现代Web开发中的无障碍性重要性14 Sunil Pai谈如何通过强大的软件、PartyKit和耐久对象改变生活15 Theo Browne谈他的个人Web开发经验16 Dominik Dorfmeister谈他的开源之旅 |
React 19 深入浅出, 构建生产级React应用程序 Learn React 19 with Epic React v2
1 React基础
001 介绍
002 在JS中实现Hello World
003 在JS中实现Hello World (1)
004 生成根节点
005 生成根节点 (1)
006 爸爸笑话时间
007 原生React API简介
008 创建React元素
009 创建React元素 (1)
010 嵌套元素
011 嵌套元素 (1)
012 深度嵌套元素
013 深度嵌套元素 (1)
014 爸爸笑话时间 原生React API
015 使用JSX简介
016 编译JSX
017 编译JSX (1)
018 插值
019 插值 (1)
020 Spread props
021 Spread props (1)
022 嵌套JSX
023 嵌套JSX (1)
024 片段
025 片段 (1)
026 爸爸笑话时间 使用JSX
027 自定义组件简介
028 简单函数
029 简单函数 (1)
030 原生API
031 原生API (1)
032 JSX组件
033 JSX组件 (1)
034 Props
035 Props (1)
036 爸爸笑话时间 自定义组件
037 TypeScript简介
038 Props (2)
039 Props (3)
040 类型收窄
041 类型收窄 (1)
042 推导类型
043 推导类型 (1)
044 默认Props
045 默认Props (1)
046 减少重复
047 减少重复 (1)
048 Satisfies
049 Satisfies (1)
050 爸爸笑话时间 TypeScript
051 样式简介
052 样式
053 样式 (1)
054 自定义组件
055 自定义组件 (1)
056 尺寸Props
057 尺寸Props (1)
058 爸爸笑话时间 样式
059 表单简介
060 表单
061 表单 (1)
062 表单操作
063 表单操作 (1)
064 输入类型
065 输入类型 (1)
066 提交
067 提交 (1)
068 表单操作
069 表单操作 (1)
070 爸爸笑话时间 表单
071 输入简介
072 复选框
073 复选框 (1)
074 下拉选择
075 下拉选择 (1)
076 单选按钮
077 单选按钮 (1)
078 隐藏输入
079 隐藏输入 (1)
080 默认值
081 默认值 (1)
082 爸爸笑话时间 输入
083 错误边界简介
084 组合
085 组合 (1)
086 其他错误
087 其他错误 (1)
088 重置
089 重置 (1)
090 爸爸笑话时间 错误边界
091 数组渲染简介
092 Key prop
093 Key prop (1)
094 焦点状态
095 焦点状态 (1)
096 Key重置
097 Key重置 (1)
098 爸爸笑话时间 数组渲染
099 React基础结束
2 React钩子
001 React钩子简介
002 UI状态管理简介
003 useState
004 useState (1)
005 控制输入
006 控制输入 (1)
007 推导状态
008 推导状态 (1)
009 初始化状态
010 初始化状态 (1)
011 初始化回调
012 初始化回调 (1)
013 爸爸笑话时间 UI状态管理
014 副作用简介
015 useEffect
016 useEffect (1)
017 清理副作用
018 清理副作用 (1)
019 爸爸笑话时间 副作用
020 状态提升简介
021 提升状态
022 提升状态 (1)
023 提升更多状态
024 提升更多状态 (1)
025 状态合并
026 状态合并 (1)
027 爸爸笑话时间 状态提升
028 DOM副作用简介
029 Refs
030 Refs (1)
031 依赖项
032 依赖项 (1)
033 原始依赖项
034 原始依赖项 (1)
035 爸爸笑话时间 DOM副作用
036 唯一ID简介
037 useId
038 useId (1)
039 爸爸笑话时间 唯一ID
040 井字棋简介
041 setState回调
042 setState回调 (1)
043 在localStorage中保存状态
044 在localStorage中保存状态 (1)
045 添加游戏历史功能
046 添加游戏历史功能 (1)
047 爸爸笑话时间 井字棋
048 React钩子结束
3 高级React API
4 React Suspense
5 高级React模式
6 React性能优化
7 React服务器组件
8 额外：专家访谈
1 React Fundamentals
001 Intro
002 Hello World in JS
003 Hello World in JS (1)
004 Generate the Root Node
005 Generate the Root Node (1)
006 Dad Joke Break
007 Intro to Raw React APIs
008 Create React Elements
009 Create React Elements (1)
010 Nesting Elements
011 Nesting Elements (1)
012 Deep Nesting Elements
013 Deep Nesting Elements (1)
014 Dad Joke Break Raw React APIs
015 Intro to Using JSX
016 Compiling JSX
017 Compiling JSX (1)
018 Interpolation
019 Interpolation (1)
020 Spread props
021 Spread props (1)
022 Nesting JSX
023 Nesting JSX (1)
024 Fragments
025 Fragments (1)
026 Dad Joke Break Using JSX
027 Intro to Custom Components
028 Simple Function
029 Simple Function (1)
030 Raw API
031 Raw API (1)
032 JSX Components
033 JSX Components (1)
034 Props
035 Props (1)
036 Dad Joke Break Custom Components
037 Intro to TypeScript
038 Props (2)
039 Props (3)
040 Narrow Types
041 Narrow Types (1)
042 Derive Types
043 Derive Types (1)
044 Default Props
045 Default Props (1)
046 Reduce Duplication
047 Reduce Duplication (1)
048 Satisfies
049 Satisfies (1)
050 Dad Joke Break TypeScript
051 Intro to Styling
052 Styling
053 Styling (1)
054 Custom Component
055 Custom Component (1)
056 Size Prop
057 Size Prop (1)
058 Dad Joke Break Styling
059 Intro to Forms
060 Form
061 Form (1)
062 Form Action
063 Form Action (1)
064 Input Types
065 Input Types (1)
066 Submission
067 Submission (1)
068 Form Actions
069 Form Actions (1)
070 Dad Joke Break Forms
071 Intro to Inputs
072 Checkbox
073 Checkbox (1)
074 Select
075 Select (1)
076 Radios
077 Radios (1)
078 Hidden Inputs
079 Hidden Inputs (1)
080 Default Value
081 Default Value (1)
082 Dad Joke Break Inputs
083 Intro to Error Boundaries
084 Composition
085 Composition (1)
086 Other Errors
087 Other Errors (1)
088 Reset
089 Reset (1)
090 Dad Joke Break Error Boundaries
091 Intro to Rendering Arrays
092 Key prop
093 Key prop (1)
094 Focus State
095 Focus State (1)
096 Key Reset
097 Key Reset (1)
098 Dad Joke Break Rendering Arrays
099 Outro to React Fundamentals
2 React Hooks
001 React Hooks Intro
002 Intro to Managing UI State
003 useState
004 useState (1)
005 Controlling Inputs
006 Controlling Inputs (1)
007 Derive State
008 Derive State (1)
009 Initialize State
010 Initialize State (1)
011 Init Callback
012 Init Callback (1)
013 Dad Joke Break Managing UI State
014 Intro to Side-Effects
015 useEffect
016 useEffect (1)
017 Effect Cleanup
018 Effect Cleanup (1)
019 Dad Joke Break Side-Effects
020 Intro to Lifting State
021 Lift State
022 Lift State (1)
023 Lift More State
024 Lift More State (1)
025 Colocate State
026 Colocate State (1)
027 Dad Joke Break Lifting State
028 Intro to DOM Side-Effects
029 Refs
030 Refs (1)
031 Dependencies
032 Dependencies (1)
033 Primitive Dependencies
034 Primitive Dependencies (1)
035 Dad Joke Break DOM Side-Effects
036 Intro to Unique IDs
037 useId
038 useId (1)
039 Dad Joke Break Unique IDs
040 Intro to Tic Tac Toe
041 setState callback
042 setState callback (1)
043 Preserve State in localStorage
044 Preserve State in localStorage (1)
045 Add Game History Feature
046 Add Game History Feature (1)
047 Dad Joke Break Tic Tac Toe
048 Outro to React Hooks
3 Advanced React APIs
4 React Suspense
5 Advanced React Patterns
6 React Performance
7 React Server Components
8 Bonus. Interviews With Experts
The text was updated successfully, but these errors were encountered: