数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究ReactJS - componentWillMount() 方法
在本文中，我们将了解如何在组件加载到 DOM 树中之前执行函数。
此方法是在 React 生命周期中的装载阶段期间使用的。此函数通常在组件加载到 DOM 树中之前调用。此方法在调用 render() 方法之前调用，因此可用于初始化状态，但还是首选构造函数。
此方法通常用于服务器端渲染。不要在此方法中调用订阅或副作用；可改为使用 componentDidMount。
注意：此方法现已弃用。
语法
UNSAFE_componentWillMount()
示例
在此示例中，我们将构建一个变色 React 应用程序，此应用程序在组件加载到 DOM 树后立即更改文本颜色。
以下示例中的第一个组件是 App。此组件是 ChangeName 组件的父级。我们单独创建 ChangeName，然后只将其添加到 App 组件中的 JSX 树中。因此，只需要导出 App 组件即可。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Tutorialspoint</h1>
<ChangeName />
</div>
);
}
}
class ChangeName extends React.Component {
constructor(props) {
super(props);
this.state = { color: 'lightgreen' };
}
UNSAFE_componentWillMount() {
// Changing the state immediately.
this.setState({ color: 'wheat' });
}
render() {
return (
<div>
<h1 style={{ color: this.state.color }}>Simply Easy Learning</h1>
</div>
);
}
}
export default App;输出
这将生成以下结果。
更新于：2021 年 3 月 18 日
2K 次浏览量
广告