ReactJS - UNSAFE_componentWillMount（） 方法

---

---

React 中的 componentWillMount（） 函数就像组件出现在网页上的准备步骤。它发生在组件出现之前。此函数获取数据，但需要注意的是，在首次显示组件之前，它不会提供任何结果。由于提取数据可能需要一些时间，因此组件不会等待此阶段完成，然后才会显示自身。

在最新版本的 React 中，不再建议使用 componentWillMount（）。他们建议改用 componentDidMount（）。如果我们真的想使用 componentWillMount（），我们可以，但我们必须将其命名为 UNSAFE_componentWillMount（）。这就像一个警告信号，React 开发人员应该避免它。

语法

UNSAFE_componentWillMount() {
	 	//the action will come here that we want to execute
}

参数

此方法不接受任何参数。

返回值

此方法不应返回任何内容。

例子

示例 - 显示警报消息

借助 UNSAFE_componentWillMount（） 函数，这是一个 React 应用程序的示例，它在加载组件之前显示警告。

import React, { Component } from 'react';

class App extends Component {
	 	UNSAFE_componentWillMount() {
	 	 	 alert("This message will appear before the component loads.");
	 	} 		
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <h1>Welcome to My React App</h1>
	 	 	 	 	 	 <p>This is a simple application using UNSAFE_componentWillMount().</p>
	 	 	 	 	</div>
	 	 	 );
	 	}
}

export default App;

输出

这是一个简单的示例，用于在网页上加载我们的 React 组件之前应用 UNSAFE_componentWillMount（） 来显示消息。请记住，在最近的 React 版本中，componentDidMount（） 比 UNSAFE_componentWillMount（） 更受欢迎，以实现类似的功能。

示例 - 数据获取应用程序

在此示例中，我们将创建一个组件，用于在即将挂载时从 JSONPlaceholder API 获取数据。然后，获取的数据将以组件的状态存储，一旦数据可用，组件就会呈现数据。所以这个应用程序的代码如下 -

import React, { Component } from 'react';
import './App.css'

class DataFetchingApp extends Component {
	 	constructor() {
	 	 	 super();
	 	 	 this.state = {
	 	 	 	 	data: null,
	 	 	 };
	 	} 		
	 	UNSAFE_componentWillMount() {
	 	 	 // fetching data from an API
	 	 	 fetch('https://jsonplaceholder.typicode.com/todos/1')
	 	 	 .then((response) => response.json())
	 	 	 .then((data) => {
	 	 	 	 	this.setState({ data });
	 	 	 })
	 	 	 .catch((error) => console.error('Error fetching data:', error));
	 	} 		
	 	render() {
	 	 	 const { data } = this.state;
	 	 		
	 	 	 return (
	 	 	 	 	<div className='App'>
	 	 	 	 	 	 <h1>Data Fetching App</h1>
	 	 	 	 	 	 {data ? (
	 	 	 	 	 	 	 	<div>
	 	 	 	 	 	 	 	 	 <h2>Data from API:</h2>
	 	 	 	 	 	 	 	 	 <p>Title: {data.title}</p>
	 	 	 	 	 	 	 	 	 <p>User ID: {data.userId}</p>
	 	 	 	 	 	 	 	 	 <p>Completed: {data.completed ? 'Yes' : 'No'}</p>
	 	 	 	 	 	 	 	</div>
	 	 	 	 	 	 	 	) : (
	 	 	 	 	 	 	 	<p>Loading data...</p>
	 	 	 	 	 	 	 	)}
	 	 	 	 	</div>
	 	 	 );
	 	}
}

export default DataFetchingApp;

App.css

.App {
	 	align-items: center;
	 	justify-content: center;
	 	margin-left: 500px;
	 	margin-top: 50px;
}
h1 {
	 	color: red;
}
p {
	 	margin: 8px 0;
	 	color: green;
}

输出

在这个 React 应用程序中，我们使用 UNSAFE_componentWillMount（） 在组件挂载之前从 API 获取数据。因此，我们使用 API 来获取数据。

示例 - 倒数计时器应用程序

现在我们有另一个简单的 React 应用程序，它使用 UNSAFE_componentWillMount（） 来设置倒数计时器。在此应用程序中，我们将有一个计时器，它将倒计时 10 秒的时间，10 秒后，它将在屏幕上显示一条警告消息，指出时间已达到零。所以这个应用程序的代码如下 -

import React, { Component } from 'react';
import './App.css';

class CountdownTimerApp extends Component {
	 	constructor() {
	 	 	 super();
	 	 	 this.state = {
	 	 	 	 	seconds: 10,
	 	 	 };
	 	} 		
	 	UNSAFE_componentWillMount() {
	 	 	 this.startTimer();
	 	} 		
	 	startTimer() {
	 	 	 this.timerInterval = setInterval(() => {
	 	 	 	 	this.setState((prevState) => ({
	 	 	 	 	 	 seconds: prevState.seconds - 1,
	 	 	 	 	}), () => {
	 	 	 	 	if (this.state.seconds === 0) {
	 	 	 	 	 	 clearInterval(this.timerInterval);
	 	 	 	 	 	 alert('Countdown timer reached zero!');
	 	 	 	 	}
	 	 	 	 	});
	 	 	 }, 1000);
	 	}
	 	
	 	render() {
	 	 	 return (
	 	 	 	 	<div className='App'>
	 	 	 	 	 	 <h1>Countdown Timer App</h1>
	 	 	 	 	 	 <p>Seconds remaining: {this.state.seconds}</p>
	 	 	 	 	</div>
	 	 	 );
	 	}
}

export default CountdownTimerApp;

输出

在此示例中，组件在 UNSAFE_componentWillMount（） 生命周期方法中开始倒数计时器。每一秒，计时器都会减少秒数状态。当倒计时达到零时，间隔将被清除并显示警报。

局限性

如果组件使用 getDerivedStateFromProps 或 getSnapshotBeforeUpdate，则不会调用此方法。

UNSAFE_componentWillMount 并不能保证该组件会在某些当前的 React 情况下被挂载，比如 Suspense。

它之所以被命名为“不安全”，是因为在某些情况下，React 可以丢弃一个正在进行的组件树并重建它，从而使UNSAFE_componentWillMount变得不可靠。

如果我们需要执行依赖于组件挂载的活动，请改用 componentDidMount。

UNSAFE_componentWillMount 是在服务器呈现时执行的唯一生命周期方法。

对于大多数实际用途，它与构造函数相当，因此最好将构造函数用于等效逻辑。

总结

UNSAFE_componentWillMount（） 是一个较旧的 React 生命周期函数，用于预组件加载任务，但在现代 React 编程中，建议遵循当前的最佳实践并使用 componentDidMount（） 来完成这些任务。