重要的反應概念

重要的 React 概念

1-反應鉤子

您可以使用useReducer來管理複雜的狀態結構，您可以使用useEffect來React Hook，讓您可以將元件與外部系統同步。您可以 useCallback/ useMemo 進行效能最佳化，useRef 進行 DOM 訪問，並建立自訂掛鉤。

2. 渲染道具模式

讓元件非常可重複使用的另一種方法是使用渲染道具模式。 render prop 是元件上的 prop，其值是傳回 JSX 元素 的函數。除了 render prop 之外，元件本身不會渲染任何內容。相反，該元件只是呼叫渲染道具，而不是實作自己的渲染邏輯。

3.懸念

Suspense 可讓您顯示回退，直到其子級完成載入。

範例 :

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

4. 誤差邊界

錯誤邊界是一個特定於React的元件，它環繞元件樹並防止該元件內的任何錯誤傳播並導致整個應用程式崩潰。

要使用它，您必須簡單地用錯誤邊界組件包裝要保護的組件樹。錯誤邊框將偵測錯誤並在包裝的元件樹中發生錯誤時顯示回退 UI。

範例 :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}


<ErrorBoundary fallback={<p>Something went wrong</p>}>
  <Profile />
</ErrorBoundary>

5. 傳遞帶有上下文的數據

通常，您將透過 props 將訊息從父元件傳遞到子元件。但是，如果您必須透過中間的許多組件傳遞道具，或者應用程式中的許多組件需要相同的訊息，則傳遞道具可能會變得冗長且不方便。 Context 允許父組件向其下方樹中的任何組件提供一些資訊（無論 有多深），而無需透過 props 明確傳遞。

6. 狀態管理

狀態管理是 React 中的關鍵概念，React 是世界上最受歡迎的用於建立動態使用者介面的 JavaScript 程式庫。
使用 Redux 管理應用程式狀態。

7. 程式碼分割

捆綁很棒，但隨著您的應用程式的增長，您的捆綁包也會增長。特別是如果您包含大型第三方函式庫。您需要密切注意捆綁包中包含的程式碼，以免不小心使其太大而導致您的應用程式需要長時間載入。

為了避免陷入大捆綁，最好提前解決問題並開始「分割」你的捆綁。 程式碼分割是Webpack、Rollup和Browserify（透過factor-bundle）等捆綁器支援的功能，可以建立多個捆綁包可以在運行時動態載入。

程式碼分割您的應用程式可以幫助您「延遲載入」使用者目前需要的內容，這可以顯著提高應用程式的效能。雖然您沒有減少應用程式中的程式碼總量，但您避免了載入使用者可能永遠不需要的程式碼，並減少了初始載入期間所需的程式碼量。

結論

在這篇文章中，我寫了React 中的高階概念。這些先進的概念提高了反應應用程式的效能和可維護性。這些概念你基本上都能理解並使用

以上是重要的反應概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！