Next.js使用Link跳转同动态路由时React类组件更新及加载慢问题咨询

问题1解决：强制卸载组件的方案 #

直接给页面组件绑定唯一key即可，在_app.js中对渲染的页面组件传入路由相关的key：

// pages/_app.js
function MyApp({ Component, pageProps, router }) {
  // 用动态路由的id+slug作为key，参数变化时key自动变更，触发组件卸载重建
  const pageKey = router.query.id ? `${router.query.id}-${router.query.slug}` : router.asPath;
  return <Component {...pageProps} key={pageKey} />
}

这个方案不需要修改原有业务逻辑，是最简单的强制实例重建的方法。

问题2解决：不强制卸载的最佳实践 #

• 移除props复制到state的反模式：不要在constructor中直接把全量props存入state，所有可从props直接推导的状态都直接用props，只把组件内部独有的状态存在state里，避免状态不同步。
• 路由参数变更的处理逻辑统一放在componentDidUpdate中，对比前后props的voId判断是否需要重新拉取数据，比getDerivedStateFromProps更易维护：

async componentDidUpdate(prevProps) {
  if (prevProps.voId !== this.props.voId) {
    this.setState({ isLoading: true });
    await this.fetchPersonalData();
    this.setState({ isLoading: false });
  }
}

• 移除getInitialProps中等待所有redux请求完成的逻辑，dispatch后直接返回props，通过redux中的加载状态在组件内渲染加载UI，解决点击链接后无响应的问题。

性能问题原因及优化方案 #

耗时翻倍的核心原因 #

客户端跳转时的请求是完全串行的：

1. 先执行getInitialProps，等待4个redux请求全部完成才返回新props，这个阶段页面不会有任何更新，用户感知为卡顿
2. 拿到新props后触发componentDidUpdate，再串行执行fetchPersonalData里的多个接口请求，两个阶段的耗时叠加，就会比初始SSR加载（服务端请求API延迟更低）慢一倍以上。

优化方案 #

1. 移除getInitialProps的阻塞等待：删掉getInitialProps中等待redux saga请求完成的Promise逻辑，dispatch请求后直接返回props，在组件内通过监听redux的isFetching状态渲染加载骨架屏，用户点击链接后立刻看到加载状态，感知性能提升明显。
2. 并行化接口请求：把fetchPersonalData中无依赖的接口用Promise.all并行调用：

// 原来的串行请求改为并行
const [visibleBeneficiaryList, beneficiaryGroups, follows, userRating] = await Promise.all([
  isVoOwnerOrPlatformAdmin ? services.beneficiaryService.getBeneficiariesVisibleToOrganization(prefixedId) : Promise.resolve(),
  isVoOwnerOrPlatformAdmin ? services.beneficiaryGroupsService.getBeneficiaryGroupsList(prefixedId, {limit: EPaginationLimit.THIRTY}) : Promise.resolve(),
  services.followsService.getFollowsList({ user_id: user.id }),
  services.ratingsService.getRatingList({ user_id: user.id, verified_organization_id: verifiedOrganization.id })
])

3. 新增接口缓存：对用户信息、关注列表等不频繁变更的接口添加本地缓存，相同参数的请求在有效期内直接复用缓存结果，不用重复发起请求。
4. 拆分数据获取逻辑：非首屏必需的数据（比如评论、动态、受益人列表）可以放到对应标签组件挂载时再拉取，不用在页面初始化时一次性拉取所有数据。

内容的提问来源于stack exchange，提问作者JustAnotherDev