ReactJS UNSAFE_componentWillMount() 方法

componentWillMount() 方法在我们的 React 组件被加载或挂载到DOM （文档对象模型）之前调用。它在React Life-cycle的挂载阶段被调用，即在render()之前。它用于通过同步执行 React 代码从组件外部获取数据，这会导致我们的组件首先以空数据呈现，因为此方法在我们的组件第一次呈现之前不返回任何内容。由于 fetch 调用是异步的，我们的组件不会等待此方法完成并继续呈现。

根据这个问题，在最新版本的 React 中已弃用 componentWillMount() 方法。建议使用componentDidMount() 方法代替它，但如果我们仍然想使用 componentWillMount() 我们可以通过将其称为UNSAFE_componentWillMount()来实现。根据 React 不建议使用这种方法，这就是为什么UNSAFE关键字放在开头是为了给所有 React 开发者一个温和的信息，让他们停止使用这种方法。这个方法可以用来在我们的 React 组件被挂载到 DOM 之前执行一个动作。

句法：

class App extends Component {

  UNSAFE_componentWillMount() {
  
    //action you want to execute
     
  }
}

创建反应应用程序：

第 1 步：使用以下命令创建一个React 应用程序。

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

cd foldername

项目结构：它将如下所示。

示例：在这个示例中，我们将构建一个应用程序，它会在我们的 React 组件加载到 DOM 之前发出警报消息。现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

文件名：App.js

Javascript

import React from 'react';
class App extends React.Component {
 
  UNSAFE_componentWillMount() {
    // Performing an action
    alert(`Welcome to GeeksForGeeks portal`);
 
  }
 
  render() {
    return 
GeeksForGeeks
;
  }
 
}
   
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

解释：在我们的组件被挂载到 DOM 之前，我们通过UNSAFE_componentWillMount() 方法收到一条警告消息，然后在渲染后我们的组件加载。这样，我们可以在组件加载之前执行任何操作。如您所见，当我们的组件加载时，控制台上还会出现一条警告消息，它清楚地告诉我们，不建议将这种方法用于我们上面已经讨论过的用途。