[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
中的高级概念文章中写下了有关

。您基本上可以理解并使用这些概念