一般而言，使用 React 的 Context 和步骤的表单是一个好主意吗？

Question

If I have a form with a couple of steps, should I use Context API or state inside of the parent component?

Answer 1

The only difference between Context API vs "state in the parent component" is how many levels you have to pass down props (the Provider in context is "state in an ancestor component" rather than a parent component).

So it depends on your component structure. If you have to pass down a callback prop more than one level, I'd go with context.

EDIT: With reference to a comment - your own personal preference comes in play with how far you are willing to prop drill for simple state vs context. I don't like doing it more than one level. In my opinion (that's a big IMO), it mixes the concerns of a component - you'll end up making a component accept props for the sole purpose of passing them on to child components.

Answer 2

It's a good question. It depends on your purposes. So, for state management you can use context/ref/state/or library based on FLAX pattern.

I prefer to use context in a lot of situations. If you want to avoid props drilling then the best solution is to use context/ref, but if you have to rerender all your steps then context isn't suitable for you.

Here you can understand all benefits of using context

https://daveceddia.com/context-api-vs-redux/

Answer 3

That depends a lot, but I honestly prefer in this use case to use it as state in the parent.

Context API, as it says in documentation, was designed for "global" share of data between a tree of react components. I don't think you should create context just to avoid passing props through components. I'd prefer to rethink component structure to make it possible to do less props drilling.

Answer 4

Those two blogs from Kent C. Dodds helped me a lot:

• How to use React Context effectively
• How to optimize your context value