React v16
unmountComponentAtNode
ReactDOM.unmountComponentAtNode 方法只能销毁 ReactDOM.render的组件节点,不能销毁React组件里render生成的节点;
先定义一个子组件
//子组件
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
value: props.value
};
}
render() {
return (
<div> {this.state.value} </div>
);
}
}
父组件里,错误使用案例
//父组件
class ParentBox extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
//此处使用unmountComponentAtNode是无效的;
const childDiv = ReactDOM.findDOMNode(this.refs.childDiv);
ReactDOM.unmountComponentAtNode(childDiv);
}
componentWillUnmount() {
}
render() {
return (
<Child value={'Loading...'} ref={'childDiv'} />
);
}
}
父组件里,正确使用
//父组件
class ParentBox extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
//先定义一个Child子组件,此处设置ref会报错
ReactDOM.render(<Child id={'childDiv2'} value={'123'}/>, document.getElementById('childBox'));
//删除子组件,此处使用unmountComponentAtNode有效
ReactDOM.unmountComponentAtNode(document.getElementById('childBox'));
}
componentWillUnmount() {
}
render() {
return (
<div>
{/*<Child value={'Loading...'} ref={'childDiv'} />*/}
<div id={'childBox'} />
</div>
);
}
}
参考:https://github.com/itbilu/react-demos/blob/master/demo5/unmountComponentAtNode.html