重要的 React 概念

1-反應(yīng)鉤子

您可以使用useReducer來管理復(fù)雜的狀態(tài)結(jié)構(gòu)，您可以useEffect來React Hook，讓您可以將組件與外部系統(tǒng)同步。您可以 useCallback/ useMemo 進行性能優(yōu)化，useRef 進行 DOM 訪問，并創(chuàng)建自定義掛鉤。

2. 渲染道具模式

使組件非?？芍赜玫牧硪环N方法是使用渲染道具模式。 render prop 是組件上的 prop，其值是返回 JSX 元素 的函數(shù)。除了 render prop 之外，組件本身不會渲染任何內(nèi)容。相反，該組件只是調(diào)用渲染道具，而不是實現(xiàn)自己的渲染邏輯。

3、懸念

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

示例 :

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

4. 誤差邊界

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

要使用它，您必須簡單地用錯誤邊界組件包裝要保護的組件樹。錯誤邊框?qū)z測錯誤并在包裝的組件樹中發(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 是世界上最流行的用于構(gòu)建動態(tài)用戶界面的 JavaScript 庫。
使用 Redux 管理應(yīng)用程序狀態(tài)。

7. 代碼分割

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

為了避免陷入大捆綁，最好提前解決問題并開始“拆分”你的捆綁。 代碼分割是Webpack、Rollup和Browserify（通過factor-bundle）等捆綁器支持的功能，可以創(chuàng)建多個捆綁包可以在運行時動態(tài)加載。

代碼分割您的應(yīng)用程序可以幫助您“延遲加載”用戶當(dāng)前需要的內(nèi)容，這可以顯著提高應(yīng)用程序的性能。雖然您沒有減少應(yīng)用程序中的代碼總量，但您避免了加載用戶可能永遠不需要的代碼，并減少了初始加載期間所需的代碼量。

結(jié)論

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

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