重新渲染我的反应组件的最佳模式？答案

【问题标题】：Best pattern to rerender my react component?重新渲染我的反应组件的最佳模式？
【发布时间】：2014-12-06 18:32:01
【问题描述】：

我更新了一个全局 data 对象，然后在 top/main 组件上再次调用 React.renderComponent()。

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

【问题讨论】：

【解决方案1】：

您通常应该将数据对象作为道具传递给组件，即使它是一个全局变量。这使您可以测试该组件，并在其他地方使用它，而无需绑定到该全局。

正如 Mike 所说，使用 React.renderComponent 更新它并没有错。

他还提到了 flux，但这有点矫枉过正。一个简单的事件发射器，您可以在其中执行.emit('change', newData) 之类的操作，并且组件正在侦听更改事件，这对于更简单的情况往往会更好。请参阅我的 answer to this question 了解如何做到这一点的示例。

【讨论】：

【解决方案2】：

这是正确的模式。 React.renderComponent 将第一次挂载一个组件，或者让一个已经挂载的组件更新。

如果您使用的是全局对象，您可能想在此处查看Flux 架构：

http://facebook.github.io/flux/docs/overview.html

【讨论】：

啊，好的。伟大的！谢谢

【解决方案3】：

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

您可以使用this.forceUpdate() 这样做，但不建议这样做。作为React docs states：

你应该尽量避免使用 forceUpdate() 并且只在 render() 中读取 this.props 和 this.state。这使您的组件“纯粹”并且您的应用程序更加简单和高效。

所以我所做的是创建一个 data 属性，如 exists 并对其进行测试：

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

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

每当我删除/保存时，我都会切换exists，组件将基于此显示或隐藏。 React 为我处理。

【讨论】：