如何忽略componentWillMount与componentWillReceiveProps警告信息

太懂这种被无关警告刷屏的烦躁了！明明自己代码里半毛钱没碰那些废弃的生命周期函数，结果依赖库的旧代码害你频繁关警告，连模拟器和调试器都被挡得严严实实，完全影响开发节奏对吧？别慌，给你几个实用的解决办法：

• 方法一：控制台层面过滤特定警告（快速生效）
  直接在项目入口文件（比如index.js）最顶部添加一段代码，重写console.error来过滤掉目标警告：

const originalError = console.error;
console.error = (...args) => {
  // 精准匹配废弃生命周期的警告关键词
  if (typeof args[0] === 'string' && (
    args[0].includes('componentWillMount') ||
    args[0].includes('componentWillReceiveProps')
  )) {
    return; // 跳过这些警告的输出
  }
  // 其他正常错误/警告照常输出
  originalError.call(console, ...args);
};

这个方法简单粗暴，马上就能见效，但记得只在开发环境用，别不小心过滤掉了自己代码的重要错误提示。

• 方法二：通过Webpack配置忽略警告（适合自定义构建流程）
  如果你的项目有自定义Webpack配置，或者用Create React App时搭配了craco/react-app-rewired，可以直接让Webpack忽略这些特定警告：
  1. 自定义Webpack配置的话，在webpack.config.js里加：

  module.exports = {
    // ...其他配置项
    ignoreWarnings: [
      /componentWillMount has been deprecated/,
      /componentWillReceiveProps has been deprecated/
    ]
  };
  

  2. 用Create React App + craco的话，在craco.config.js里修改：

  module.exports = {
    webpack: {
      configure: (webpackConfig) => {
        webpackConfig.ignoreWarnings = [
          /componentWillMount has been deprecated/,
          /componentWillReceiveProps has been deprecated/
        ];
        return webpackConfig;
      }
    }
  };
  

这种方式是从构建工具层面拦截警告，比控制台过滤更彻底。

• 方法三：给依赖库打补丁（长期根治方案）
  如果警告的依赖库已经不维护了，或者作者迟迟不更新，用patch-package给依赖库打个小补丁，替换掉废弃的生命周期函数：
  1. 先安装工具：npm install patch-package --save-dev
  2. 找到node_modules里出问题的依赖包，把componentWillMount换成UNSAFE_componentWillMount（或者根据逻辑换成componentDidMount），componentWillReceiveProps同理换成UNSAFE_componentWillReceiveProps
  3. 运行npx patch-package [依赖包名称]生成补丁文件
  4. 把生成的patches文件夹提交到版本控制，其他同事安装依赖时会自动应用补丁
     这个方法从根源解决问题，不会影响其他警告，但需要花点时间修改依赖代码，适合长期维护的项目。

根据你的项目情况选一个就行，优先推荐方法三（能根治），如果赶时间就先用方法一或二应急～

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