javascript - 将新的服务器数据传递给react.js组件

Question

我是 React.js 的新手，正在努力理解一些核心概念来决定我们是否应该在我们的应用程序中使用这个库。我的主要问题实际上是处理从服务器获取的模型中的更新。

想象一下，我有一个页面应该显示五个不同的模型。我按照本文中描述的方式构建了它:http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html ，所以我有“根”组件，所有 5 个模型都通过了该组件，并使用 props 将它们分解为保存该模型的组件。所以，现在更新了 2 个模型(我从位于 React 组件之外的模型代码中获取此事件)，我需要在 UI 上反射(reflect)这一点。做这个的最好方式是什么？

我正在考虑以下选项:

1. 再次使用新数据运行 renderComponent 并依赖 DOM diff react 技术。我对此感到担忧，因为我需要对任何微小的数据更改执行此操作。
2. 为持有此模型的组件调用 setState。这样，数据就不再是 Prop ，而是状态，(据我所知)这不是一个好的做法。另外，我没有看到任何方法可以引用根组件之外的子组件。
3. 有多个 renderComponent 调用，这样我就可以访问任何此组件的 setProps。但随后我需要做一些模板工作(以使页面上的所有容器可用)，这会扼杀所有的 react 想法。
4. 拥有一个根组件，其中包含向用户显示的应用程序中所有可能的模型，并调用 setProps 来更改模型。我担心这个组件会变得相当大，并在某个时候变成“意大利面条”+来自第 1 点的担忧。

提前感谢您，希望我能够清楚地解释我的问题。

Answer 1

使用相同的组件但不同的数据再次调用 renderComponent 相当于调用 component.setProps()。因此，要么将所有模型保持为最小公分母的状态，要么在更改时再次调用 setProps/renderComponent 。