React 重點：您可能缺少的功能

React 鞏固了其作為構建動態和響應式使用者介面的首選庫的地位。憑藉其聲明式方法和基於元件的架構，React 簡化了開發現代應用程式的複雜過程。然而，與任何強大的工具一樣，即使對於經驗豐富的開發人員來說，也有一些功能和最佳實踐經常被忽視。

在本部落格中，我們將深入研究 React 的一些被忽視的方面，這些功能可以增強您的開發工作流程、優化效能並幫助您編寫更清晰、更有效率的程式碼。

1.佈局鉤子(useLayoutEffect)

每個人都聽說過 useEffect 鉤子，它可以讓您在依賴項發生變化時編寫有效的程式碼。 useLayoutEffect 是 useEffect 鉤子的一個版本，每當瀏覽器重新繪製螢幕時就會觸發它，它在許多場景中都很有用。

工具提示

import { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
}, []);
// ...

這裡的程式碼在螢幕渲染之前檢查工具提示是否能夠適合螢幕，因此會自行重新排列。

詳細解釋請上 https://react.dev/reference/react/useLayoutEffect

2. 出口（React Router）

雖然不是 React 原生的一部分，但在 React 中管理路由時，React Router 是一個非常著名且有用的函式庫。隨著它的流行，它的文檔中提到的許多功能都被忽略了。

插座的使用方法

曾經為您的專案設計過儀表板嗎？頂部欄和側邊欄元素始終保持不變，並且只有頁面的一部分在不同路線之間變化？這正是嵌套路由和出口概念發揮作用的地方

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route path="messages" element={<DashboardMessages />} />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

父路由path="/"表示佔位符或您想要載入動態元件的頁面佈局，上例中的Dashboard()將只有一個標題，頁面上的以下內容將取決於在我們位於/messages或/tasks 的路線上。我們也可以使用outletContext

為所有子頁面建立上下文

了解更多：https://reactrouter.com/en/main/components/outlet

3.載入優化（React.Suspense + Await）

React 在 React Router 的幫助下支援載入器和後備，無需使用任何其他函式庫，這裡有一個如何使用它們的簡單範例。

function Book() {
  const { book, reviews } = useLoaderData();
  return (
    <div>
      <h1>{book.title}</h1>
      <p>{book.description}</p>
      <React.Suspense fallback={<ReviewsSkeleton />}>
        <Await
          resolve={reviews}
          errorElement={
            <div>Could not load reviews ?</div>
          }
          children={(resolvedReviews) => (
            <Reviews items={resolvedReviews} />
          )}
        />
      </React.Suspense>
    </div>
  );
}

注意：Await 期望在 內部渲染。或 父級啟用後備 UI。

概括

我們探索了一些經常被忽視但強大的 React 功能，這些功能可以顯著增強您的開發流程。我們從巢狀路由和 Outlet 元件的使用開始，這簡化了應用程式中子路由的處理。接下來，我們深入研究了佈局掛鉤，特別是 useLayoutEffect，它對於在瀏覽器重繪之前執行更新至關重要，確保 UI 互動更加流暢。我們還討論了 React 的 Await 和 Suspense 標籤的使用，它們有助於更有效地管理非同步操作，使您能夠建立更快、更靈敏的使用者介面。透過理解和利用這些功能，您可以編寫更乾淨、更有效率的 React 程式碼，並針對效能和可擴充性進行了最佳化。

以上是React 重點：您可能缺少的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！