<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ Devan Wang - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ freeCodeCamp 是一个免费学习编程的开发者社区，涵盖 Python、HTML、CSS、React、Vue、BootStrap、JSON 教程等，还有活跃的技术论坛和丰富的社区活动，在你学习编程和找工作时为你提供建议和帮助。 ]]>
        </description>
        <link>https://www.freecodecamp.org/chinese/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ Devan Wang - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/chinese/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Thu, 21 May 2026 15:49:16 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/chinese/news/author/devan/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ React 19 的新功能 ]]>
                </title>
                <description>
                    <![CDATA[ React 19 刚刚发布，为这个流行的 JavaScript 库带来了大量新功能和增强功能。对于希望保持领先地位的开发人员来说，了解这些更新至关重要。本课程旨在帮助你了解 React 19 的最新变化，从数据变更处理到有助于改善用户体验的创新型新 API。 我们刚刚在 freeCodeCamp.org [https://www.freecodecamp.org/] YouTube 频道上发布了一门课程，该课程将向你介绍 React 19 中令人兴奋的新功能。其中包括处理 Actions、乐观更新、表单状态、新的 use() API 等的内置方法。React 19 中包含大量改进，可简化开发流程并提高应用程序性能，对于 React 开发者来说是重大的更新。 来自 Scrimba 的 Bob Ziroll 开发了本课程。他是世界上最受欢迎的 React 讲师之一。 自 2022 年 React 18 发布以来，React 已经两年多没有重大版本更新了。在 React 19 中，有许多特性可以简化对数据变更的处理，同时提供 API 通过乐观更新来增强用户体验。这些更新旨在使应用程序更 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/whats-new-in-react-19/</link>
                <guid isPermaLink="false">6684cfc49100b5049d88a718</guid>
                
                    <category>
                        <![CDATA[ React ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Devan Wang ]]>
                </dc:creator>
                <pubDate>Wed, 03 Jul 2024 04:20:13 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2024/07/800a24a8-98cd-4979-b062-9ff4cd1c35ad.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>原文：</strong> <a href="https://www.freecodecamp.org/news/whats-new-in-react-19/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">What's New in React 19</a>
      </p><!--kg-card-begin: markdown--><p>React 19 刚刚发布，为这个流行的 JavaScript 库带来了大量新功能和增强功能。对于希望保持领先地位的开发人员来说，了解这些更新至关重要。本课程旨在帮助你了解 React 19 的最新变化，从数据变更处理到有助于改善用户体验的创新型新 API。</p>
<p>我们刚刚在 <a href="https://www.freecodecamp.org/">freeCodeCamp.org</a> YouTube 频道上发布了一门课程，该课程将向你介绍 React 19 中令人兴奋的新功能。其中包括处理 Actions、乐观更新、表单状态、新的 <code>use()</code> API 等的内置方法。React 19 中包含大量改进，可简化开发流程并提高应用程序性能，对于 React 开发者来说是重大的更新。</p>
<p>来自 Scrimba 的 Bob Ziroll 开发了本课程。他是世界上最受欢迎的 React 讲师之一。</p>
<p>自 2022 年 React 18 发布以来，React 已经两年多没有重大版本更新了。在 React 19 中，有许多特性可以简化对数据变更的处理，同时提供 API 通过乐观更新来增强用户体验。这些更新旨在使应用程序更快、反应更灵敏，即使在执行复杂的数据操作时也是如此。此外，React 团队还发布了新的开源编译器，他们已经开发了多年，旨在管理许多与性能相关的幕后细节，使开发者能够更多地专注于构建功能，而不是优化。</p>
<h3 id="">课程概览</h3>
<p>参与这个综合课程，我们将深入研究 React 19 最新和最强大的功能。本课程包括对 React 18 中重要概念的复习，以及对 React 19 中新功能的深入介绍。以下是你将学习的内容：</p>
<h4 id="transitionreact18">Transition（复习 React 18）</h4>
<p>我们先快速回顾一下 Transition，这是 React 18 中引入的一个关键特性，有助于更顺畅地管理 UI 更新。</p>
<h4 id="react">React 编译器</h4>
<p>了解新的 React 编译器，这是一个强大的工具，可自动处理性能优化，让开发者编写出更简洁、更高效的代码。</p>
<h4 id="actions">表单 Actions</h4>
<p>探索新的表单 Actions 特性，简化表单状态管理，更有效地处理用户交互。</p>
<h4 id="useactionstate"><code>useActionState()</code></h4>
<p>了解如何使用 <code>useActionState()</code> 这个新 Hook，以更直观的方式管理异步 Actions 的状态。这部分内容分为三个部分进行深入探讨。</p>
<h4 id="actions">Actions 中的错误处理</h4>
<p>掌握 Actions 中改进的错误处理方式，以创建更强大的应用程序。</p>
<h4 id="useoptimistic"><code>useOptimistic()</code></h4>
<p>了解 <code>useOptimistic()</code> 这个 Hook 如何帮助你乐观更新用户界面，在等待服务器确认期间立即呈现更改，提供更好的用户体验。</p>
<h4 id="useformstatus"><code>useFormStatus</code></h4>
<p>了解如何使用 <code>useFormStatus</code> 这个新 Hook 来更有效地追踪表单状态。</p>
<h4 id="refprop">ref 作为 prop</h4>
<p>了解将 ref 用作 prop 的新方法，这种方法增强了组件的交互和操作。</p>
<h4 id="use"><code>use()</code></h4>
<p>深入了解 <code>use()</code> API 这个新增功能，它进一步简化了 React 应用中的对异步代码的管理。</p>
<h4 id="">其他改进</h4>
<p>我们还将介绍其他一些改进，例如增加了对元数据标签的支持，从而带来更流畅、更高效的开发体验。</p>
<h3 id="">课程目录</h3>
<ul>
<li>
<p>React 19 有什么新特性？</p>
</li>
<li>
<p>React 18 回顾 - useTransition (1)</p>
</li>
<li>
<p>React 18 回顾 - useTransition (2)</p>
</li>
<li>
<p>React 编译器</p>
</li>
<li>
<p>表单 Actions</p>
</li>
<li>
<p>React 中的错误和加载状态</p>
</li>
<li>
<p>useActionState() - 第 1 部分</p>
</li>
<li>
<p>useActionState() - 第 2 部分</p>
</li>
<li>
<p>useActionState() - 第 3 部分</p>
</li>
<li>
<p>useOptimistic()</p>
</li>
<li>
<p>useFormStatus()</p>
</li>
<li>
<p>ref 作为 prop</p>
</li>
<li>
<p>use()</p>
</li>
<li>
<p>其他改进 - 元数据标签</p>
</li>
<li>
<p>总结</p>
</li>
</ul>
<p>无论你是经验丰富的 React 开发者还是刚刚入门，本课程都能提供充分利用 React 19 潜力所需的知识技能。在 <a href="https://www.youtube.com/watch?v=81uAxzeyL2I&amp;feature=youtu.be">freeCodeCamp.org YouTube 频道</a>上观看完整课程（总共 1 小时）。</p>
<figure class="kg-card kg-embed-card" data-test-label="fitted">
        <div class="fluid-width-video-container">
          <div style="padding-top: 56.25%;" class="fluid-width-video-wrapper">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/81uAxzeyL2I" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy" name="fitvid0"></iframe>
          </div>
        </div>
      </figure>
<!--kg-card-end: markdown--><p>你也可以<a href="https://www.bilibili.com/video/BV13H4y1w7o5/?spm_id_from=333.999.0.0">在 bilibili 观看这个视频</a>。</p> ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
