重要的 React 概念

1-反應(yīng)鉤子

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

2. 渲染道具模式

讓元件非?？芍匮}使用的另一種方法是使用渲染道具模式。 render prop 是元件上的 prop，其值是傳回 JSX 元素 的函數(shù)。除了 render prop 之外，元件本身不會渲染任何內(nèi)容。相反，該元件只是呼叫渲染道具，而不是實作自己的渲染邏輯。

3.懸念

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

範例 :

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

4. 誤差邊界

錯誤邊界是一個特定於React的元件，它環(huán)繞元件樹並防止該元件內(nèi)的任何錯誤傳播並導(dǎo)致整個應(yīng)用程式崩潰。

要使用它，您必須簡單地用錯誤邊界組件包裝要保護的組件樹。錯誤邊框?qū)蓽y錯誤並在包裝的元件樹中發(fā)生錯誤時顯示回退 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. 傳遞帶有上下文的數(shù)據(jù)

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

6. 狀態(tài)管理

狀態(tài)管理是 React 中的關(guān)鍵概念，React 是世界上最受歡迎的用於建立動態(tài)使用者介面的 JavaScript 程式庫。
使用 Redux 管理應(yīng)用程式狀態(tài)。

7. 程式碼分割

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

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

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

結(jié)論

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

以上是重要的反應(yīng)概念的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！