Decorators装饰器在项目中的实际应用与常见问题总结

优化前：卡得不行

最近接手了一个老项目，页面加载性能简直让人崩溃。一个复杂的表单页面，首次渲染要5秒多，用户操作时还各种卡顿。特别是用到了大量Decorators装饰器的组件，随便点两下就卡得受不了。

最开始我以为是网络问题，后来发现本地开发环境也一样慢。试了几次发现主要问题出在装饰器上，有些组件用了五六个装饰器，每个都执行一堆逻辑，层层嵌套下来直接把性能拖垮了。

找到瓶颈了！

为了确认问题到底出在哪，我打开了Chrome DevTools，重点看了几个指标：

• Scripting时间飙到了3秒多
• Recalculate Style频繁触发
• 有些装饰器方法重复执行了好几百次

折腾了半天终于搞清楚原因了。我们的装饰器写得太随意，很多都在做重复计算，而且每次组件更新都会重新执行一遍。比如有个权限校验的装饰器，居然在每次render都调接口，这不是找死嘛。

优化思路和具体方案

试了几种方案后，最后这个效果最好。主要从两个方向入手：缓存结果和减少不必要的执行。

1. 缓存装饰器结果

之前我们的权限校验装饰器是这样的：

function withPermission(WrappedComponent) {
  return class extends React.Component {
    state = { hasPermission: false }

    async componentDidMount() {
      const permission = await fetch('https://jztheme.com/api/check-permission').then(res => res.json());
      this.setState({ hasPermission: permission.allowed });
    }

    render() {
      if (!this.state.hasPermission) return null;
      return <WrappedComponent {...this.props} />;
    }
  }
}

每次组件挂载都要调接口，太浪费了。改成带缓存的版本：

const permissionCache = {};

function withPermission(WrappedComponent) {
  return class extends React.Component {
    state = { hasPermission: false }

    async componentDidMount() {
      if (permissionCache[this.props.permissionKey]) {
        this.setState({ hasPermission: permissionCache[this.props.permissionKey] });
        return;
      }

      const permission = await fetch('https://jztheme.com/api/check-permission').then(res => res.json());
      permissionCache[this.props.permissionKey] = permission.allowed;
      this.setState({ hasPermission: permission.allowed });
    }

    render() {
      if (!this.state.hasPermission) return null;
      return <WrappedComponent {...this.props} />;
    }
  }
}

2. 防止重复包装

发现有些组件被同一个装饰器包了好几层，导致重复执行。加了个简单的判断：

function withLogging(WrappedComponent) {
  if (WrappedComponent.__isLogged) return WrappedComponent;

  return class extends React.Component {
    static __isLogged = true;

    render() {
      console.log('Rendering:', WrappedComponent.name);
      return <WrappedComponent {...this.props} />;
    }
  }
}

3. 按需加载装饰器

有些装饰器只在特定场景需要，没必要一开始就全加上。改成了动态加载：

function withConditionalHOC(conditionFn, hoc) {
  return (WrappedComponent) => {
    return conditionFn() ? hoc(WrappedComponent) : WrappedComponent;
  }
}

// 使用方式
const EnhancedComponent = withConditionalHOC(
  () => window.innerWidth > 768,
  withHeavyLogic
)(BaseComponent);

优化后：流畅多了

以上方案实施完后，效果立竿见影：

• 页面首屏加载从5s降到800ms左右
• Scripting时间从3s降到500ms
• Recalculate Style减少了80%

特别是在低配机器上测试，之前动不动就卡死，现在可以正常操作了。虽然还有一些小问题，但整体体验已经提升好几个档次。

性能数据对比

下面是具体的性能数据对比：

• 初始加载时间：5200ms → 820ms
• 交互响应时间：平均1500ms → 200ms
• 内存占用：减少约40%
• 重绘次数：从每秒20+次降到5次左右

这里特别提醒：装饰器的执行顺序也很重要，我踩过好几次坑，把耗时长的放前面会导致后续装饰器等待太久。建议把轻量级的装饰器优先执行。

结尾：分享与交流

以上是我对Decorators性能优化的实战经验总结，核心就是：该缓存的缓存，该按需加载的按需加载，别让装饰器乱跑。有更优的实现方式欢迎评论区交流。

这种性能优化的技巧还有很多变种，后续我会继续分享这类实践经验。希望这篇文章能帮到同样被装饰器性能问题困扰的开发者们。