如何在 React Hooks 中使用 componentWillMount()？

componentWillMount() 方法允许我们在组件被加载或挂载到 DOM（文档对象模型）中时同步执行 React 代码。该方法在 React 生命周期的挂载阶段被调用

您不能在基于钩子的组件中使用任何现有的 React 生命周期方法，如 ComponentDidMount、ComponentWillUnmount 等。为了使用基于类的方法的功能，React 钩子为 componentDidMount、componentDidUpdate 和 componentWillUnmount 组合提供了 useEffect Hook 等替代方案，但对于 componentWillMount()，即使在官方 React 文档中也没有提供这样的钩子。

ComponentWillMount() 将根据这个问题在 React 的未来版本中被弃用。建议使用 ComponentDidMount() 或 useEffect hook 作为替代方案，但您仍然可以通过将其称为 UNSAFE_ComponentWillMount() 来使用 ComponentWillMount()。

ComponentWillMount() 通常用于在加载组件或从服务器获取数据时显示加载器，但一旦完全弃用，我们可以使用 SuspenseAPI 作为更好的选择。

创建反应应用程序：

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

npx create-react-app functiondemo

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

cd functiondemo

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

项目结构

示例：在此示例中，我们将构建一个应用程序，当组件在 DOM 树中呈现时记录消息。

App.js：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

使用 componentWillMount() 方法：

Javascript

import React from 'react';
  
class ComponentOne extends React.Component {
  UNSAFE_componentWillMount() {
    console.log('Component is mounted in the DOM');
  }
  render() {
    return 
Hello Geeks!
;
  }
}
  
class App extends React.Component {
  render() {
    return (
      

        
      
    );
  }
}
  
export default App;

替代使用 useLayoutEffect() 方法：

Javascript

import React, { useLayoutEffect } from 'react';
  
const ComponentOne = () => {
  // Defining the useLayoutEffect hook
  useLayoutEffect(() => {
    console.log('Component is mounted in the DOM');
  }, []);
  
  return 
Hello Geeks!
;
};
  
const App = () => {
  return (
    

      
    
  );
};
  
export default App;

注意：您可以在 App.css 文件中定义自己的样式。

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

npm start

输出：

输出