Question

我目前正面临React的问题。我需要知道从DOM中删除组件的时间。

我在组件生命周期中发现的是componentWillUnmount，它在从DOM中删除组件之前被调用。

有没有办法用React实现这个目标？在普通的javascript？

感谢。

[编辑]

@jpdelatorre “普通的javascript”===不使用图书馆; - ）

我的用例是在反应组件中使用jsPlumb。

基本上jsPlumb是一个通过位置计算在DOM中绘制svg的库。

在我的主要组件中有一个项目列表。每个项目都是一个组件。在每个渲染的项目上，我使用JsPlumb来绘制它。

但是......当我删除列表中的项目时，项目正在更改DOM中的位置，因此我需要请求jsPlumb根据新位置重新绘制内容。这就是为什么我需要知道何时从DOM中完全删除组件。

Answer 1

setTimeout是正确的生命周期方法。如您所说，它是在删除组件之前触发的。如果你有什么需要等待，直到它被删除，你可以使用'use strict'; module.export = function(grunt) { //time how long tasks take can help when optimizing buildtime require('time.grunt')(grunt); //automatically load required grunt tasks require('jit-grunt')(grunt); //define the configuration off all the tasks grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // make sure code styles are up to par and there are no obivious mistakes jshint: { options: { jshintrc: '.jshintrc', reporter: require('jshint-stylish') }, all: { src: [ 'Gruntfile.js', '/app/scripts/{,*/}*.js' ] } } }); grunt.registerTask('build', ['jshint']); grunt.registerTask('default', ['build']); };短暂的超时值来安排当前任务完成后的回调。

Answer 2

componentWillUnmount是可以挂钩的生命周期方法。

但如上所述，如果你想在component1中了解有关卸载component2的信息，那么你需要在其生命周期方法中触发component2中的一个动作，该动作应该在component1中订阅并在component1监听器中执行一些操作。

Answer 3

正如其他已经提到的，你需要componentWillUnmount。这是React中的一个简单示例（我在那里添加了一些注释以获取其中的内容）：

var Button = React.createClass({
  componentWillUnmount: function(){
      // console will show this message when compoent is being Unmounted("removed")
        console.log('Button removed');
  },

  render() {
    return <h1 ref='button_node'>
    <ReactBootstrap.Button bsStyle="success">Red</ReactBootstrap.Button>
    </h1>;
  }
});  



var RemoveButton = React.createClass({
  getInitialState: function() {
     // this state keep tracks if Button removed or not
     //(you can use it for some redrawing or anything else in your code)
     return {buttonMounted: true}
  },

  mountRedButton: function(){
    ReactDOM.render(<Button/>, document.getElementById('button'));
    this.setState({buttonMounted: true});
  },

  unmountRedButton: function(){
    ReactDOM.unmountComponentAtNode(document.getElementById('button'));
    this.setState({buttonMounted: false});
  },

  render() {
    return <h1>
      //based on condition if Button compoennt removed or not we show/hide different buttons
      { this.state.buttonMounted ? <ReactBootstrap.Button onClick={this.unmountRedButton } bsStyle="danger">Remove Red Button!</ReactBootstrap.Button> : null}
      { this.state.buttonMounted ? null :<ReactBootstrap.Button onClick={this.mountRedButton } bsStyle="success">Add Red Button!</ReactBootstrap.Button> }        
    </h1>;
  }
});


// mount components    
ReactDOM.render(<Button/>, document.getElementById('button'));
ReactDOM.render(<RemoveButton/>, document.getElementById('remove'));

以下是JSFiddle

的完整工作示例

关于＆＃34;普通javascript＆＃34; - 你已经在使用React JS，我的例子基于React和ReactDom，仅此而已（实际上还有react-bootstrap，我只为漂亮的按钮添加它，它根本不需要）

<强>更新使用MutationObserver怎么样？如果您需要删除DOM中的Node但在删除节点之前触发componentWillUnmount（这对您来说似乎不可变），则可以使用它。按照我的按钮示例：

var removalWatcher = new MutationObserver(function (e) {
    var removalTimeStamp = '[' + Date.now() + '] ';
  if (e[0].removedNodes.length) {
    console.log('Node was removed', e[0].removedNodes, 'timestamp:', removalTimeStamp)
  };
});

这是一个JsFiddle，其中包含更新的示例。您可以比较打印到控制台中的MutationObserver和React ComponentWillUnmount的时间戳。

Answer 4

好的，谢谢大家！我找到了一个符合我需求的解决方案，并且（恕我直言）干净...

在我的父组件中，我处理componentDidUpdate生命周期事件，在那里我可以知道（使用prevProps和props），如果所做的更改需要触发我的操作......

class MyComponent extends Component {
    // this one is called each time any props is changed
    componentDidUpdate(prevProps, prevState) {
       // if condition is matched then do something
    }

}

ReactJs如何知道何时从DOM中删除组件

4 个答案: