探索 React 新功能和代码示例

React 19 现已推出，它包含旨在增强开发人员体验和应用程序性能的功能。从优化代码到引入强大的新钩子，React 19 继续巩固其作为构建现代 Web 应用程序首选库的地位。让我们深入了解关键功能，并通过实际代码示例探索它们如何彻底改变您的开发流程。

---

React 19 的主要特性

1.React编译器

新的 React 编译器通过将代码转换为高效的 JavaScript 来简化和优化您的代码。这消除了手动性能调整（例如记忆）的需要，让开发人员专注于构建功能而不是微调性能。

示例：

// Before: Manual optimization with useCallback
const MemoizedComponent = React.useCallback(() => {
  return <div>Optimized!</div>;
}, []);

// After: Automatically optimized
function Component() {
  return <div>Optimized!</div>;
}

---

2. 服务器组件

React 19 中的服务器组件通过在服务器上渲染组件来减少发送到客户端的 JavaScript 量。这可以提高性能并实现更快的页面加载。

示例：

// ServerComponent.server.jsx
export default function ServerComponent() {
  return <div>This is rendered on the server.</div>;
}

// App.jsx
import ServerComponent from './ServerComponent.server';

function App() {
  return (
    <div>
      <h1 id="Welcome-to-React">Welcome to React 19</h1>
      <servercomponent></servercomponent>
    </div>
  );
}

---

3. 行动

操作简化了状态更新和错误处理。通过使用“use action”指令标记函数，React 可以自动管理挂起状态、错误和乐观更新。

示例：

function UpdateName() {
  const [name, setName] = useState('');

  const handleSubmit = async () => {
    'use action';
    await updateName(name);
  };

  return (
    

setName(e.target.value)} /> Submit

); }

---

4. 新 Hooks：use()、useFormStatus() 和 useOptimistic()

use() 获取数据

use() 钩子允许开发人员直接在组件内处理 Promise。

示例：

function DataFetchingComponent() {
  const data = use(fetchData());

  return (
    <div>
      <h1 id="Data">Data:</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}