重新渲染React组件的最佳模式是什么？

Question

我有一个全局的data对象，我在更新它后再次调用顶级/主要组件上的React.renderComponent()。

这是触发此更新的正确模式吗？

- boom

Answer 1

通常情况下，即使是全局变量，也应将数据对象作为prop传递到组件中。这样可以测试组件，并且在不绑定到该全局变量的情况下在其他地方使用它。

正如Mike所说，使用React.renderComponent更新它没有任何问题。

他还提到了flux，但对于这个问题来说，这有点过头了。一个简单的事件发射器，其中你可以像.emit('change', newData)这样做，而组件正在侦听更改事件，往往对于更简单的情况更好。请参见我的回答此问题以获取如何完成此操作的示例。

- Brigand

Answer 2

这是正确的模式。 React.renderComponent 将要么首次 挂载 组件，要么获取已经挂载的组件进行 更新。

但如果您正在使用全局对象，则可能需要了解这里的 Flux 架构： http://facebook.github.io/flux/docs/overview.html

- Mike Driver

---

啊，好的。太棒了！谢谢。 - boom

Answer 3

我曾经遇到同样的问题，然后问自己是否真的需要重新渲染组件。

你可以使用this.forceUpdate()来实现，但这并不是一个好的选择。正如React文档所述：

应该尽量避免使用forceUpdate()，只在render()中读取this.props和this.state。这使得你的组件“纯净”，让你的应用程序更简单、更高效。

所以我创建了一个像exists这样的data属性，并对其进行了测试：

// renderDeleteButton() is being called on render()
renderDeleteButton () {
  if (!this.props.store.exists) {
    return;
  }

  return(
    <DeleteButton
      ...
      deleteAction={this.delete} />
  );
}

每当我删除/保存时，我切换exists，组件会根据其显示或隐藏。React为我处理这个过程。

- lucasarruda