top | item 6981327

(no title)

enginous | 12 years ago

I think the stuff React is doing is impressively simple and non-magical. Although I haven't used React yet, I wouldn't be surprised if these ideas make for code that's relatively easy to reuse and reason about.

The format of the post is also quite nice; a few short points with illustrations and a clear takeaway.

discuss

order

Touche|12 years ago

I use React and like it a lot. The biggest issue it has right now is there is no good way for a component on one branch of the tree to get information to a component in another branch. You have to talk to your parent components by having them attach a function as a property, and this simply doesn't scale to large or even medium sized applications.

peterhunt|12 years ago

This model usually works pretty well for smaller components (see http://facebook.github.io/react/blog/2013/11/05/thinking-in-...)

For larger ones, we provide lifecycle hooks so you can set up these subscriptions manually. In componentDidMount() and componentWillUnmount() you can subscribe/unsubscribe to some sort of messaging system, and when you receive the message call setState(). Usually you only need to do this in a few places and the regular React dataflow will carry you the rest of the way.

Does that make sense? We should probably write up this technique.

skybrian|12 years ago

This isn't specific to React; in large GWT apps we use an event bus. Perhaps you could do the same thing?

Or, instead of an event-based approach, you could could pass in an object and use Object.observe() to observe state changes.

It looks like React just implements the view in MVC, so you still need a separate way to observe the model.

tomhallett|12 years ago

I've been using React for a few months - it definitely does make for code which is easy to reuse and reason about.

The part of the architecture which has had the biggest impact on my code: the relationship between a component and it's subcomponents. A parent component can only pass "props" to it's subcomponents (ie it can't pass state, which is easily mutable). And a child component can only call a function on it's parent if that function is provided to it via props (ie a callback).

This design has forced me to reason about the interface between components (open/closed principle, law of demeter, etc) and has really improved my code.

Also, the team is very active/helpful in their irc room.