React将移除旧生命周期钩子，componentWillMount实际需求的解决方案

嘿，我来帮你搞定这个NProgress进度条的迁移问题！针对你遇到的场景，完全可以用React官方推荐的方案替代即将被移除的componentWillMount，下面给你几个靠谱的实现思路：

1. 把初始化逻辑移到constructor中 #

constructor是类组件初始化时第一个执行的方法，只会触发一次，和componentWillMount一样在render之前执行，非常适合放这类启动型的逻辑：

export default class Page extends React.Component {
  constructor(props) {
    super(props);
    Nprogress.start(); // 在这里启动进度条
  }

  componentDidMount() {
    Nprogress.done();
  }

  render() {
    return <div>你的页面内容</div>;
  }
}

2. 用componentDidMount结合异步逻辑（更符合React设计理念） #

如果你的进度条需要配合异步数据加载，或者担心constructor里的逻辑影响初始化，也可以把启动逻辑放在componentDidMount里。虽然它是在组件挂载后执行，但用户几乎感知不到这个延迟，反而更符合React“挂载后再执行副作用”的原则：

export default class Page extends React.Component {
  componentDidMount() {
    Nprogress.start();
    // 结合异步请求的场景：请求完成后结束进度条
    fetch('/api/page-data')
      .then(() => Nprogress.done())
      .catch(() => Nprogress.done());
  }

  render() {
    return <div>你的页面内容</div>;
  }
}

3. 迁移到函数组件+useEffect（长期推荐方案） #

如果项目允许，换成函数组件配合useEffect是更现代的写法，它能灵活模拟多个生命周期的行为。比如用空依赖数组的useEffect实现初始化逻辑（只执行一次），或者监听路由变化来处理页面切换场景：

import React, { useEffect } from 'react';
import Nprogress from 'nprogress';

export default function Page(props) {
  // 组件挂载时启动进度条，卸载时清理
  useEffect(() => {
    Nprogress.start();
    return () => Nprogress.done();
  }, []);

  // 路由切换时重启进度条（如果是React Router场景）
  useEffect(() => {
    Nprogress.start();
    return () => Nprogress.done();
  }, [props.location]);

  return <div>你的页面内容</div>;
}

为什么要放弃componentWillMount？ #

React官方移除这三个钩子的核心原因是：它们在异步渲染模式下可能导致重复执行、状态不一致（比如服务端渲染时componentWillMount会执行两次），而上面的替代方案都能避开这些问题，同时更贴合React的设计思路。

总结一下：你的NProgress场景最直接的替代就是把Nprogress.start()移到constructor或者componentDidMount；如果是路由切换的场景，函数组件+useEffect监听路由变化会更灵活。

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