javascript - ReactJS - 销毁旧的组件实例并创建新的
问题描述
我有一个可能令人困惑的问题,因为它不符合标准行为反应和虚拟 dom 的工作方式,但无论如何我想知道答案。
想象一下,我有一个名为“Container”的简单反应组件。容器组件在渲染方法内部有一个“div”,其中包含另一个名为“ChildContainer”的组件。围绕“ChildContainer”的“div”的 ID 为“wrappingDiv”。
例子:
render() {
<Container>
<div id="wrappingDiv">
<ChildContainer/>
</div>
</Container
}
我怎样才能销毁“ChildContainer”-component-instance 并创建一个全新的。这意味着旧实例的“ComponentWillUnmount”被调用,新组件的“ComponentDidMount”被调用。
我不希望通过更改状态或道具来更新旧组件。
我需要这种行为,因为我们合作伙伴公司的一个外部库有一个库,它改变了 dom-items,并且在 React 中,当我更新组件时,我会得到一个“找不到节点”异常。
解决方案
如果您给组件 a key
,并key
在重新渲染时更改它,旧的组件实例将卸载,新的组件实例将安装:
render() {
++this.childKey;
return <Container>
<div id="wrappingDiv">
<ChildContainer key={this.childKey}/>
</div>
</Container>;
}
孩子key
每次都会有一个新的,所以 React 会假设它是列表的一部分并丢弃旧的,创建新的。组件中导致其重新渲染的任何状态更改都会强制子组件执行卸载并重新创建的行为。
现场示例:
class Container extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
class ChildContainer extends React.Component {
render() {
return <div>The child container</div>;
}
componentDidMount() {
console.log("componentDidMount");
}
componentWillUnmount() {
console.log("componentWillUnmount");
}
}
class Example extends React.Component {
constructor(...args) {
super(...args);
this.childKey = 0;
this.state = {
something: true
};
}
componentDidMount() {
let timer = setInterval(() => {
this.setState(({something}) => ({something: !something}));
}, 1000);
setTimeout(() => {
clearInterval(timer);
timer = 0;
}, 10000);
}
render() {
++this.childKey;
return <Container>
{this.state.something}
<div id="wrappingDiv">
<ChildContainer key={this.childKey}/>
</div>
</Container>;
}
}
ReactDOM.render(
<Example />,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
话虽如此,对于插件的潜在问题可能会有更好的答案。但以上解决了实际提出的问题...... :-)
推荐阅读
- javascript - 用户输入文本后,如何使用 AJAX 更新我的数据库?
- c# - 如何检测触发器何时触发?
- python - Python:如何在前 10 个值的列表中找到最大值?
- c# - 使用 Activator 创建实例
- gobblin - KafkaHDFS 示例出错:java.lang.NoSuchMethodError
- if-statement - 在 Cypress 中,如何检查按钮是否具有属性?
- c - 循环逻辑,以便使用 scanf n 次打印输入的字符
- r - R - tmap 如何添加数据集
- mamp - MAMP Pro 5.6 不可用
- angular - app.module 中的 Angular 8 NgRx 效果不是一个类