如何避免React应用因无效组件渲染而整体崩溃

我完全懂你的糟心感受——就因为某个不起眼的小组件出问题（比如传了个无效的iconId，或者某个日期组件拿到了坏数据），整个App直接白屏，把更重要的内容都给搞没了，这确实太闹心了。咱们一步步来解决这个问题，分两种情况处理：能预判的错误，和不可预见的意外错误。

一、先处理「可预判的无效组件渲染」（比如你的Icon组件例子） #

这个情况根本不需要用到ErrorBoundary，因为你能提前预判到组件可能找不到。看你的Foo组件，当传入无效iconId时，iconData?.component会是undefined，这时候你强行渲染<ComponentToRender />就相当于让React渲染undefined，它肯定会报错。

只需要在Foo组件里加个简单的判断：如果找不到对应组件，直接返回null（或者一个你自定义的占位符，比如灰色图标、错误提示文字），不要硬渲染不存在的东西：

const Foo = ({ iconId }) => {
  const components = [
    { icon: 'Bar', iconId: 'bar', component: Bar },
    { icon: 'Baz', iconId: 'baz', component: Baz },
  ];
  const iconData = components.find(c => c.iconId === iconId);
  const ComponentToRender = iconData?.component;

  // 关键：提前判断组件是否存在，不存在就返回null或占位符
  if (!ComponentToRender) {
    return null; // 或者 return <div className="icon-fallback">图标加载失败</div>
  }

  return <ComponentToRender />;
};

这样就算传了"foz"这种无效ID，Foo组件只会不渲染目标图标，完全不会影响App里的其他重要内容。

二、处理「不可预见的运行时错误」（比如日期组件的坏数据） #

这种情况属于意外错误（比如缓存损坏、接口返回异常数据），这时候就得用React官方提供的ErrorBoundary——它就像组件树里的安全网，能接住子组件抛出的错误，不让错误往上冒泡导致整个App崩溃。

你觉得一个个给组件包ErrorBoundary太麻烦？那咱们可以用「通用ErrorBoundary组件+高阶组件（HOC）」的方式，批量给组件加上防护，不用重复写代码。

第一步：实现一个通用的ErrorBoundary组件 #

React目前只支持类组件作为ErrorBoundary（函数式的需要用第三方库，比如react-error-boundary），我们先写一个基础的：

import React from 'react';

class SafeBoundary extends React.Component<
  { children: React.ReactNode; fallback?: React.ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };

  // 捕获错误后更新状态，显示fallback
  static getDerivedStateFromError() {
    return { hasError: true };
  }

  // 可以在这里上报错误到监控系统（比如Sentry）
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error("组件出错了:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 出错时显示的内容，默认返回null，也可以传自定义fallback
      return this.props.fallback || null;
    }
    return this.props.children;
  }
}

如果你不想写类组件，也可以用react-error-boundary这个轻量第三方包，它提供了函数式的API，用起来更顺手：

import { ErrorBoundary } from 'react-error-boundary';

// 使用时直接包裹组件
<ErrorBoundary fallback={null}>
  <LastSeenDateComponent timestamp={badTimestamp} />
</ErrorBoundary>

第二步：用高阶组件批量给组件加防护 #

写一个HOC，把需要保护的组件自动用ErrorBoundary包起来：

function withSafety<T extends React.ComponentProps<any>>(
  Component: React.ComponentType<T>,
  fallback?: React.ReactNode
) {
  return function SafeComponent(props: T) {
    return (
      <SafeBoundary fallback={fallback}>
        <Component {...props} />
      </SafeBoundary>
    );
  };
}

// 给你的日期组件加上防护
const SafeLastSeenDate = withSafety(LastSeenDateComponent);

// 之后直接用SafeLastSeenDate代替原来的组件
<SafeLastSeenDate timestamp={potentiallyBadData} />

这样你只需要给每个可能出问题的组件包一次，之后不管哪里用这个安全版的组件，出错了都不会崩整个App。

第三步：合理划分错误边界区域 #

如果不想给每个组件单独包，也可以把可能出问题的小区域用ErrorBoundary包起来，比如在EntireApp里：

const EntireApp = () => {
  return (
    <div>
      <div>Something more important and healthy component</div>
      {/* 包可能出问题的图标组件 */}
      <SafeBoundary fallback={<div>图标加载失败</div>}>
        <Foo iconId="foz" />
      </SafeBoundary>
      {/* 包可能出问题的日期组件 */}
      <SafeBoundary fallback={<div>日期加载失败</div>}>
        <LastSeenDateComponent timestamp={badData} />
      </SafeBoundary>
    </div>
  );
};

就算里面的组件出错，只会影响这个小区域，外面的核心内容完全不受影响。

纠正一个误区：关reactStrictMode没用 #

reactStrictMode: false只是关闭了开发环境的严格模式检查（比如重复渲染、废弃API提示），它和运行时错误的捕获完全没关系，所以关了它根本解决不了你的问题，别在这浪费时间了。

最后总结 #

1. 可预判的错误：提前做存在性检查，从根源避免错误发生（比如判断组件是否存在，不存在就返回null）。
2. 不可预见的错误：用ErrorBoundary做安全网，通过通用组件+HOC的方式减少重复代码，不用每个组件都单独写防护。
3. 别指望关StrictMode解决问题，它不是干这个的。

内容来源于stack exchange