更新所有者状态的正确方法

Question

I have two components, contact form, and input.

At this moment i pass onChangeEvent from contact to input as is described in many tutorials and its works fine - input update his owner state.

But there is way to pass 'this' from contact to input by prop, or context and then I can update owner state without passing onChangeEvent - but is this a good idea?

Is there another option to update owner state without passing onChangeEvent?

Answer 1

I believe you could technically do it, as a React component is a regular javascript object in the end, so you could pass it as a prop.

However, that's not a good idea in general, for various reasons:

• It tightly couples the two components together. If you ever want to reuse the input component in another place, you'll need to pass in the exact same state.
• Linked to this, it allows manipulation of the internal state of one component, by another component, which is a violation of good OO design.

You are right however, that things tend to become quite verbose when working like this. They also become hard to reason about when one has more complex trees of components passing props and change handlers between them.

One solution to the problem, is employing the Flux design pattern, and namely it's Redux implementation.

In Redux one has a single piece of global state, a plain object, of which components see pieces (sub objects). Components receive this state as props, and just render from it in a simple fashion. There's a set of actions which transform this state, and any component can issue such an action, as a result of user interaction. There's still the concept of "state", but it is reserved for truly local things, such as the state of a form before pressing the save button etc.