重要的 React 概念

1-反應(yīng)鉤子

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

2. 渲染道具模式

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

3.懸念

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

範(fàn)例 :

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

4. 誤差邊界

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

要使用它，您必須簡(jiǎn)單地用錯(cuò)誤邊界組件包裝要保護(hù)的組件樹(shù)。錯(cuò)誤邊框?qū)蓽y(cè)錯(cuò)誤並在包裝的元件樹(shù)中發(fā)生錯(cuò)誤時(shí)顯示回退 UI。

範(fàn)例 :

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ù)

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

6. 狀態(tài)管理

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

7. 程式碼分割

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

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

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

結(jié)論

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

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