从官方教程:
我了解“使计时器无效”。可以使用fetch
中止AbortController
。但是我不理解“清理在componentDidMount
中创建的所有DOM元素”,我可以看到这种情况的示例吗?
最佳答案
如果网络请求发送库支持中止正在进行的网络请求调用,则可以肯定地用componentWillUnmount
方法调用它。
但是,与清理DOM
元素有关。根据目前的经验,我将举几个例子。
第一个是-
import React, { Component } from 'react';
export default class SideMenu extends Component {
constructor(props) {
super(props);
this.state = {
};
this.openMenu = this.openMenu.bind(this);
this.closeMenu = this.closeMenu.bind(this);
}
componentDidMount() {
document.addEventListener("click", this.closeMenu);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeMenu);
}
openMenu() {
}
closeMenu() {
}
render() {
return (
<div>
<a
href = "javascript:void(0)"
className = "closebtn"
onClick = {this.closeMenu}
>
×
</a>
<div>
Some other structure
</div>
</div>
);
}
}
在这里,我将删除在安装组件时添加的click事件监听器。
第二个是-
import React from 'react';
import { Component } from 'react';
import ReactDom from 'react-dom';
import d3Chart from './d3charts';
export default class Chart extends Component {
static propTypes = {
data: React.PropTypes.array,
domain: React.PropTypes.object
};
constructor(props){
super(props);
}
componentDidMount(){
let el = ReactDom.findDOMNode(this);
d3Chart.create(el, {
width: '100%',
height: '300px'
}, this.getChartState());
}
componentDidUpdate() {
let el = ReactDom.findDOMNode(this);
d3Chart.update(el, this.getChartState());
}
getChartState() {
return {
data: this.props.data,
domain: this.props.domain
}
}
componentWillUnmount() {
let el = ReactDom.findDOMNode(this);
d3Chart.destroy(el);
}
render() {
return (
<div className="Chart">
</div>
);
}
}
在这里,我试图将
d3.js
与react集成到componentWillUnmount
中;我正在从DOM中删除图表元素。除此之外,我使用
componentWillUnmount
在打开后清理 bootstrap 模态。我确定还有很多其他用例,但是这些是我使用
componentWillUnMount
的情况。希望对您有帮助。