将新服务器数据传递给react.js组件 [英] Pass new server data to react.js components

问题描述

我是React.js的新手，并且正在努力理解几个核心概念，以决定我们是否应该将此库用于我们的应用程序。我的主要问题是实际处理从服务器获取的模型中的更新。

I'm new to React.js and struggling to understand few core concepts to decide should we use this library for our application. My main problem is actually handling update in model that fetched from server.

想象一下，我有一个应该显示五种不同模型的页面。我是按照本文所述的方式构建的： http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html ，所以我有root组件，其中所有5个模型都通过并使用道具它们将归结为拥有此模型的组件。所以，现在更新了2个模型（我从我的模型代码中获取了这些事件，这些模型代码存在于反应组件之外），我需要在UI上反映这一点。做这个的最好方式是什么？

Imagine, that I have a page that should display five different models. I've built it in the way described in this article: http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html, so I have "root" component where all the 5 models passed and using props they are going down to the components that hold this models. So, now 2 models updated (I get this events from my model code that live outside of react components) and I need to reflect this on UI. What is the best way to do this?

我正在考虑以下选项：

1. 使用新的运行renderComponent数据再次依赖于DOM差异反应技术。我对此感到担心，因为我需要在任何微小的数据更改上执行此操作。


2. 为持有此模型的组件调用setState。通过这种方式，数据变得不是道具，而是（根据我的理解）不是良好实践的状态。另外，我没有看到任何方法来获取根组件之外的子组件。


3. 有多个renderComponent调用，所以这样我就可以访问任何一个setProps这个组件。但后来我需要做一些模板工作（让页面上的所有容器都可用）并且它会杀死所有反应的想法。


4. 让一个根组件包含向用户显示的应用程序中的所有可能模型，并调用setProps来更改模型。我关注的是，这个组件会变得非常大，并且在某些时候成为意大利面+来自第1点的担忧。

1. Run renderComponent with a new data once again and rely on the DOM diff react techniques. I have a concern with this, since I'll need to do this on any small change of data.
2. Call setState for the components that holding this models. In this way, data become not prop, but state which is (from what I understand) not a good practice. Plus, I don't see any way to get ref to the child component outside of the root component.
3. Having multiple renderComponent calls, so this way I will have access to setProps for any of this component. But then I will need to do some templating work (to have all the containers available on the page) and it kills all the react idea.
4. Having one root component that include all the possible models in application displayed to users and call setProps for changing models. My concern here, that this component will grow pretty big and become "spaghetti" at some point + concerns from point 1.

谢谢事先希望我能清楚地解释我的问题。

Thank you in advance and hope I was able explain my problem clearly.

推荐答案

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

Calling renderComponent again with the same component but different data is equivalent to calling component.setProps(). So either keep all the models as state in the least common denominator, or just call setProps/renderComponent again when it changes.

这篇关于将新服务器数据传递给react.js组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！