组件未卸载

Question

我正在尝试编写一个React mixin，它可以创建一些键绑定来轻松滚动列表视图，但是，在从DOM中删除组件后删除事件侦听器时遇到问题

密新：

componentDidMount: function() {
    var requiredFunction = Object.getPrototypeOf(this).keyedList;
    if (!_.isFunction(requiredFunction)) {
      console.log('[KeyedListMixin] You must define the keyedList() function');
    }

    $(document).on('keydown', this.__handleKeyDown);
  },

  componentDidUnMount: function() {
    $(document).off('keydown', this.__handleKeyDown);
  },

渲染：

if (showNewCommentWindow) {
      centeredWindow   = (
        <FixedView>
          <div className='new-comment-window'>
            <NewResourceWindow
              listObjects       = {searchResults}
              onSearchItemClick = {this._handleSearchItemClick}
              handleOnChange    = {this._handleSearchChange}
              />
          </div>
        </FixedView>
      )
    }
return (
   ....
   {centeredWindow}
   ....  

但是一旦showNewCommentWindow为假，结果FixedView没有呈现，则该组件由于某种原因无法卸载。

Answer 1

生命周期方法不会被称为componentDidUnMount，它被称为componentWillUnmount。套管为Unmount而非UnMount且其为Will而非Did的两个重要区别。如果它被称为componentDidUnmount，则该组件已经卸载，并且已经释放了对DOM节点的引用。因此，在卸载组件之前，清除componentWillUnmount中与DOM相关的任何内容。