更多

Question

我有一个定期更新的组件，我想在此组件之外构建一个实用程序函数，在组件更新时需要更新其内部状态。

例如：

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 1 };
  }
}

class Utility {
  constructor(componentInstance) {
    this.internalNum = // computedInstance's internal counter state (how?)
    // and when the component has updated, I'd like to change the internalNum (how?)
  }
}

我知道如果我将Utility函数传递到Sample函数并根据React的生命Sample更新Utility，就可以实现这一目标循环方法，但我不想在Sample中引入这种依赖。

也许这里有更好的设计模式......或者如果这很好，它会如何运作？

Answer 1

也许这里有更好的设计模式

基本上，您必须考虑Sample使用新值调用setState这一事实。这样的事情最好由Sample公开（作为回调或事件）。

或者，您可以将状态从Sample移出到全局位置，例如使用redux。

更多

https://github.com/reactjs/redux

Answer 2

我同意@basarat你应该实现redux只是因为你应该总是实现redux（因为它摇滚）。无论如何，可以使用静态属性在此场景中进行解决方法。

var _counter;

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 1 };
    _counter = 1;
  }

  updateCounter() {
    var newCounter = this.state.counter + 1

    this.setState({ counter: newCounter });
    _counter = newCounter;
  }

  static get counter() { return _counter; }
}

class Utility {
  constructor(componentInstance) {
    this.internalNum = Sample.counter;
  }
}

如何检查React组件何时更新？

2 个答案:

更多