Question

此刻我正在学习ReactJS，并努力了解如何根据其他地方的更改来呈现/更新内容。

示例：

我有一个计时器应用程序，其中包括暂停/重新启动功能。它包含一个“开始/暂停”按钮。

Timer.js

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

Button.js

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

我要更新标签：

取决于计时器是否在初始渲染时启动/停止
通过按按钮手动启动/停止计时器
通过其他方式手动启动/停止计时器
以编程方式启动/停止计时器（例如达到限制）

在jQuery中，我可能会向body标签触发自定义事件触发器：

$('body').on('start_playing', function() {
  $('#playpause_button).text('Pause');
}

但是在ReactJS中可能有更多的“本机”方法。

我希望这是有道理的，您可以提供帮助！

Answer 1

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

如果没有第三方商店库，则可以使用有状态组件。

您可以使用条件重做来根据不同的状态显示不同的元素。

以下是您要实现的示例有状态组件：https://codesandbox.io/s/14vokm9q14

请记住，将状态保持在视图层中不是一个好习惯。考虑使用Redux / Mobx：

Redux-需要大量的样板：创建化简器，动作创建者，动作类型，处理副作用（具有redux-thunk / redux-saga / redux-observable）等。但是它稳定，可靠且易于测试。
Mobx-与您的示例类似。在MVVM中，您拥有经典意义上的模型，将属性装饰为可观察到的，然后将此模型注入您的react组件中。之后，您只需更改模型的属性，这些更改就会反映到您的视图中。

React.js渲染和状态更改依赖

1 个答案: