ismounted antipattern，track own property

Question

在阅读这部分文档之后，我正在学习reactJs：

  

一种简单的迁移策略，适用于任何升级代码以避免的人   isMounted（）用于自己跟踪挂载状态。只需设置一个   在componentDidMount中将_isMounted属性设置为true，并在componentWillUnmount中将其设置为false，并使用此变量检查   组件的状态。

这是否意味着_isMounted值必须存储在state？

中

到目前为止，我有这个：

isMounted: function(){
    this.setState({ _isMounted: true });
},

componentDidMount: function() {
    if(this.state._isMounted) { // This is bad.
        this.setState({...});
    }
},

Answer 1

是的，您可以跟踪_isMounted中的state，因为：

1. 无法通过道具计算
2. 您最有可能在render()
中使用它

通过https://twitter.com/dan_abramov/status/749710501916139520

示例

http://codepen.io/mikechabot/pen/GqvyOE

<强> SomeComponent.jsx

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      _isMounted: false
    }
  }
  componentDidMount() {
    this.setState({
      _isMounted: true
    })
  }
  render() {
    const { _isMounted } = this.state;
    return (
      <div>
        Mounted? { _isMounted ? 'Yes' : 'No' }
      </div>
    )
  }
}

Answer 2

我也想知道如何解决这种反模式，最后使用勒克斯接受的答案。

后来发现使用状态同样糟糕，甚至会导致双重渲染。

预期的反模式解决方法是外汇：

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this._isMounted = undefined;
    }

    componentDidMount() {
        this._isMounted = true;
    }

    componentWillUnmount() {
      this._isMounted = false;
    }
}