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

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

// 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>Welcome to React 19</h1>
      <ServerComponent />
    </div>
  );
}

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

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

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

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

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

useFormStatus() 進行表單管理

透過提交狀態(tài)和錯誤的即時回饋來簡化表單狀態(tài)管理。

範例：

function FormComponent() {
  const { isSubmitting, error } = useFormStatus();

  return (
    <form>
      <button type="submit" disabled={isSubmitting}>Submit</button>
      {error && <p>Error: {error.message}</p>}
    </form>
  );
}

useOptimistic() 進行樂觀 UI 更新

useOptimistic() 鉤子讓實作樂觀更新變得簡單。

範例：

function OptimisticUpdateComponent() {
  const [items, setItems] = useState(initialItems);
  const [optimisticItems, addItem] = useOptimistic(items, async (newItem) => {
    await apiAddItem(newItem);
    return [...items, newItem];
  });

  return (
    <ul>
      {optimisticItems.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
      <button onClick={() => addItem({ id: Date.now(), name: 'New Item' })}>
        Add Item
      </button>
    </ul>
  );
}

5. 指令：“使用客戶端”和“使用伺服器”

檔案級指令明確定義元件是否應該在客戶端或伺服器上渲染，從而更容易管理渲染邏輯。

範例：

// ClientComponent.jsx
'use client';

export default function ClientComponent() {
  return <div>This component is rendered on the client.</div>;
}

// ServerComponent.jsx
'use server';

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

React 19 的實際優(yōu)勢

提高性能

React 編譯器和伺服器元件等功能最大限度地減少了發(fā)送到客戶端的 JavaScript 數(shù)量，從而實現(xiàn)更快的載入時間和更好的使用者體驗。

簡化的程式碼庫

新的掛鉤和操作減少了樣板程式碼，使應用程式更易於維護和擴展。

提高開發(fā)人員的生產(chǎn)力

借助 useOptimistic() 和 use() 等工具，開發(fā)人員可以專注於建置功能，而不是手動處理複雜的狀態(tài)管理或非同步操作。

結(jié)論

React 19 是 Web 開發(fā)領域向前邁出的重要一步。其功能優(yōu)先考慮效能、可擴展性和開發(fā)人員體驗，使建立強大的應用程式比以往更容易。無論您是經(jīng)驗豐富的 React 開發(fā)人員還是剛剛?cè)腴T，這些更新都值得探索並整合到您的專案中。

你對 React 19 感到興奮嗎？在下面的評論中分享您的想法和經(jīng)驗！

以上是探索 React 新功能和程式碼範例的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！