时间戳

首页 > 解决方案 > Reactjs 渲染和状态更改依赖项

javascript - Reactjs 渲染和状态更改依赖项

问题描述

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

例子：

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

计时器.js

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

按钮.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 中可能有更多的“原生”方式来做到这一点。

我希望这是有道理的，你可以帮忙！

标签： javascriptreactjs

解决方案

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

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

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

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

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

  • Redux - 它需要很多样板：创建reducer、action-creators、action-types、处理副作用（使用redux-thunk/redux-saga/redux-observable）等。但它稳定、可靠且易于测试。

  • Mobx - 就像你在你的例子中一样。它是 MVVM，您可以在其中拥有经典含义的模型，将属性装饰为可观察的，然后将该模型注入您的反应组件。之后，您可以更改模型的属性，这些更改将反映到您的视图中。

推荐阅读