[2

1-反應鉤

usereducer

對hook進行react hook，使您可以將組件與外部系統同步。您可以[usecallback

2。渲染道具模式 使組件可重複使用的另一種方法是使用 render prop模式 jsx element 的函數。除了渲染道具之外，該組件本身不會渲染任何內容。相反，該組件簡單地調用渲染prop，，而不是實現其自己的渲染邏輯。 3。懸念 懸浮

： }> 懸浮> 4。誤差邊界

是一個特定於反應的組件，它包裹在組件樹周圍，並防止該組件內部的任何錯誤擴散並導致整個應用程序崩潰。

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

：

}>
  

將信息從父組件傳遞到子組件。但是，如果您必須通過中間的許多組件或應用程序中的許多組件需要相同的信息，則通過道具會變得冗長而不方便。

明確傳遞它。 6。國家管理

很棒，但是隨著您的應用程序的增長，您的捆綁包也會成長。特別是如果您包括大型第三方庫
。您需要密切關注所包含的代碼中的代碼

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;
  }
}


Something went wrong}>
  

，最好解決問題並開始“分裂”您的

。 代碼splitting ， lollup 代碼 - 拆分您的應用程序可以幫助您“ zlazy-load”，僅用戶當前所需的內容，這些內容可以顯著改善應用程序的性能。雖然您尚未減少應用程序中代碼的總體代碼，但您避免了用戶可能永遠不需要的加載代碼，並減少了

結論

在本文中，我在React
中的高級概念文章中寫下了有關

。您基本上可以理解並使用這些概念