Question

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

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

Answer 1

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

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

他还提到了 flux ，但这对此来说太过分了。一个简单的事件发射器，其中您执行类似.emit('change', newData)的操作，并且组件正在侦听更改事件，对于更简单的情况往往更好。有关如何完成此操作的示例，请参阅我的answer to this question。

Answer 2

这是正确的模式。 React.renderComponent首次 mount 组件，或者将已安装的组件获取 update 。

如果你正在使用全局对象，你可能想在这里查看Flux架构：

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

Answer 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为我处理。

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

3 个答案: