你能在不调用setState的情况下强制React组件重新渲染吗?

我有一个外部(组件)，可观察对象，我想监听的变化。当对象更新时，它会发出更改事件，然后我希望在检测到任何更改时重新呈现组件。

使用顶级React。渲染这是可能的，但在组件中它不起作用(这是有意义的，因为渲染方法只返回一个对象)。

下面是一个代码示例:

export default class MyComponent extends React.Component {

  handleButtonClick() {
    this.render();
  }

  render() {
    return (
      <div>
        {Math.random()}
        <button onClick={this.handleButtonClick.bind(this)}>
          Click me
        </button>
      </div>
    )
  }
}

在内部单击按钮会调用this.render()，但这并不是真正导致呈现发生的原因(您可以在操作中看到这一点，因为由{Math.random()}创建的文本没有改变)。但是，如果我简单地调用this.setState()而不是this.render()，它就可以正常工作。

所以我想我的问题是:React组件需要有状态才能渲染吗?是否有一种方法可以在不改变状态的情况下强制组件按需更新?

当前回答

所以我想我的问题是:React组件需要有状态吗要重新渲染?是否有一种方法强制组件更新不改变状态的需求?

其他答案试图说明你可以这样做，但关键是你不应该这样做。即使是改变密钥这种俗气的解决方案也没有抓住重点。React的强大之处在于放弃手动管理内容何时应该呈现的控制，而只是关注内容应该如何映射到输入上。然后供给输入流。

如果您需要手动强制重新渲染，那么几乎可以肯定您做得不对。

2016-09-08 16:42:08

其他回答

另一种方法是调用setState和preserve state:

this.setState（prevState=>（{...上一页状态}））;

2018-07-24 11:54:14

当你想要两个React组件进行通信时，它们不受关系(父子关系)的约束，建议使用Flux或类似的架构。