当前位置：首页 > 文章列表 > 文章 > 前端 > 重要的反应概念

重要的反应概念

来源：dev.to 2024-10-22 08:21:46 0浏览收藏

本篇文章向大家介绍《重要的反应概念》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

重要的反应概念

重要的 react 概念

1-反应钩子

您可以使用usereducer来管理复杂的状态结构，您可以useeffect来react hook，让您可以将组件与外部系统同步。您可以 usecallback/ usememo 进行性能优化，useref 进行 dom 访问，并创建自定义挂钩。

2. 渲染道具模式

使组件非常可重用的另一种方法是使用渲染道具模式。 render prop 是组件上的 prop，其值是返回 jsx 元素 的函数。除了 render prop 之外，组件本身不会渲染任何内容。相反，该组件只是调用渲染道具，而不是实现自己的渲染逻辑。

3、悬念

suspense 可让您显示回退，直到其子级完成加载。

示例 :

<suspense fallback={<loading />}>
  <somecomponent />
</suspense>

4. 误差边界

错误边界是一个特定于react的组件，它环绕组件树并防止该组件内的任何错误传播并导致整个应用程序崩溃。

要使用它，您必须简单地用错误边界组件包装要保护的组件树。错误边框将检测错误并在包装的组件树中发生错误时显示后备 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. 传递带有上下文的数据

通常，您将通过 props 将信息从父组件传递到子组件。但是，如果您必须通过中间的许多组件传递道具，或者应用程序中的许多组件需要相同的信息，则传递道具可能会变得冗长且不方便。 context 允许父组件向其下方树中的任何组件提供一些信息（无论 有多深），而无需通过 props 显式传递。