Javascript Reactjs渲染和状态更改依赖项

目前我正在学习ReactJS，努力理解如何根据其他地方的变化呈现/更新内容

例如：

我有一个定时器应用程序，它包括暂停/重启功能。它包含一个开始/暂停按钮

Timer.js

export class Timer {
  constructor(parentApp) {
    this.app = app;
    this.playing = false;
  }
  start() {
    this.playing = true;
  }
  pause() {
    this.playing = false;
  }
}

export class IconButtonBar extends Component {
  constructor(props) {
    super(props);
    this.state = {label: 'Start'};
  }
  render() {
    return (
      <div className="IconButtonBar">
        <Button label={this.state.label} />
      </div>
    );
  }
}

Button.js

export class Timer {
  constructor(parentApp) {
    this.app = app;
    this.playing = false;
  }
  start() {
    this.playing = true;
  }
  pause() {
    this.playing = false;
  }
}

export class IconButtonBar extends Component {
  constructor(props) {
    super(props);
    this.state = {label: 'Start'};
  }
  render() {
    return (
      <div className="IconButtonBar">
        <Button label={this.state.label} />
      </div>
    );
  }
}

但在ReactJS中可能有更多的“本地”方法来实现这一点

---

我希望这是有意义的，你可以帮助我

您需要改变react应用程序的结构化方式。忘了jQuery吧。React是声明性的，您需要说明应该呈现什么（当然可以用另一种方式来实现，但是为什么要使用React呢？）

如果没有第三方存储库，则可以使用有状态组件

根据不同的状态，可以使用条件重新渲染来显示不同的元素

下面是您想要实现的有状态组件的示例：

请记住，在视图层中保持状态不是一个好的做法。考虑使用RUDUX／MOBX：

• Redux-它需要很多样板：创建还原器、动作创建者、动作类型、处理副作用（Redux thunk/Redux saga/Redux observable）等，但它稳定、可靠且易于测试

• Mobx-类似于您的示例中的内容。它是MVVM，在这里，您拥有经典意义上的模型，将属性装饰为可观察的，并将此模型注入到您的react组件中。在这之后，您可以修改模型的属性，这些更改将反映到您的视图中

---

您可以将标签存储在

定时器

组件状态，并将标签作为道具传递到

图标按钮栏

，然后使用它。e、 g.

此.props.label

。然后，您可以在状态下更新

标签

，具体取决于是否达到限制、是否按下启动按钮等。我将给出类似的想法。将播放状态传递给按钮组件，并有条件地更改标签字符串。但传递道具会阻止这种条件逻辑。请允许我问一个问题@Tholle，在计时器中保持标签状态可能是一种“反模式”吗？我同意这一点，我只是想作为一名学习者学习。我不认为这是一种反模式。对于第一个共同祖先来说，这是最有可能的方式。试图在

IconButtonBar

组件中包含大量逻辑来选择合适的标签可能非常困难。谢谢您的回答。再想想，是的，你是对的@Tholle。按钮组件中的逻辑将非常混乱。但是，取消国家部分让我感到困惑。如果任何其他组件不使用此

标签

状态，那么我们是否需要解除该状态？但同样，混乱的逻辑可能比在这里传递标签更糟糕。