数据结构
组网
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程序设计
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究ReactJS —— componentDidUpdate() 方法
在本文中，我们将学习如何在 DOM 树中更新组件时执行函数。
只有在组件更新或传递给其的属性更改时，才会调用此方法。它不会在组件的初始渲染中调用。此方法主要用于执行某些仅在更新 DOM 时才需要执行的操作。
为了避免任何性能问题，建议使用条件循环来使用此方法，如下所示：
componentDidUpdate(prevProps, prevState) {
if (prevState.text !== this.state.text) {
// Write logic here.
}
}语法
componentDidUpdate(prevProps, prevState, snapshot)
参数
prevProps ——传递给此组件的上一个属性
prevState ——组件的上一个状态
snapshot ——getSnapshotBeforeUpdate() 方法返回的值
示例
在此示例中，我们将构建一个变色的 React 应用程序，它将在单击按钮时更改文本颜色，该按钮将更新组件，并且将调用 **componentDidUpdate** 方法。
在以下示例中，我们的第一个组件是 **App**。此组件是 **Change **组件的父元素。我们单独创建 **Change **，并且将其添加到 **App** 组件中的 JSX 树中。因此，只需要导出 App 组件。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Tutorialspoint</h1>
<Change />
</div>
);
}
}
class Change extends React.Component {
constructor(props) {
super(props);
this.state = { color: '#000' };
}
componentDidUpdate() {
console.log('componentDidUpdate method is called');
}
render() {
return (
<div>
<h1 style={{ color: this.state.color }}>Simply Easy Learning</h1>
<button onClick={() => this.setState({ color: '#0f0' })}>
Change Color
</button>
</div>
);
}
}
export default App;输出
将产生以下结果。
更新于：2021 年 3 月 18 日
1000+ 次浏览
广告