组件的React.js道具

Question

Basing on this example https://jsfiddle.net/reactjs/n47gckhr/light/ taken from React's official docs https://facebook.github.io/react/docs/thinking-in-react.html

1) If I were to create multiple FilterableProductTable and having to get the data from server, I'll have to place the ajax method in a parent component and pass the data to FilterableProductTable (as in the example) on initialisation.

2) Wouldn't it make sense to have the ajax method inside FilterableProductTable to fetch the data it needs(and be an independent component). But if do that I will have to make the data(products in the example) a state of FilterableProductTable and not props since props can't be changed by its own component. But making the products as state doesn't sound right.

So is option 1 better or should I go with option 2?

Answer 1

Option 1 is better than option 2 but using a flux pattern would be better still. The primary advantage of using a flux pattern is better separation of concerns. It is good to have your data logic separate from your display logic. This results in easier maintenance of your project.