未卸载组件

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 为 false，结果 FixedView 不会被渲染，组件由于某种原因不会卸载。

Answer 1

生命周期方法不叫 componentDidUnMount，叫 componentWillUnmount。大小写是 Unmount 而不是 UnMount 以及它是 Will 而不是 Did 的两个重要区别。如果它被称为 componentDidUnmount 组件将已经被卸载并且对 DOM 节点的引用将被释放。因此，您在卸载组件之前清理了 componentWillUnmount 中的所有 DOM 相关内容。

未卸载组件

Component not being unmounted

reactjs