React.js：为什么传递回调以将数据更新到拥有的组件

Question

I'm doing the React.js tutorial ( http://facebook.github.io/react/docs/tutorial.html ), and don't understand the reasoning behind this line:

It makes sense to do all of this logic in CommentBox since CommentBox owns the state that represents the list of comments.

Why doesn't CommentBox just pass the list of comments to CommentForm so it can add the new comment to the list, instead of passing onCommentSubmit callback?

Answer 1

In general, this inversion of control allows you to centralize stateful data and the manipulation of that data in the component that's "responsible" for keeping track of it and gives you less reason to change components. For example, if the list of comments one day turns into a map of comments, or an immutable data structure of comments, you shouldn't have to change CommentForm , only CommentBox .

This also allows you to build more reusable components. For example, it's not a stretch to imagine a scenario where you'd want to be able to edit a comment. By passing a change handler into CommentForm , it would be possible to reuse this component for editing as well as creating comments, but this is only possible if you don't make assumptions inside the form as to what should happen when it submits.