React中setState的这两种更新函数是否相等？

Question

I've recently learned about updater functions for setState in React.

And now I've seen this concept used in two different ways. Let's say we have a state object like this:

interface State {
  readonly expanded: boolean;
  readonly slugs: string[];
}

state: State = { expanded: false, slugs: [] }

I have seen updater functions used like this:

this.setState(prevState => ({ ...prevState, expanded: !prevState.expanded }));

And like this:

this.setState(({ expanded }) => ({ expanded: !expanded }));

I've tried this out myself to see if there is a difference between using the two, but I couldn't find one (besides the amount of characters 😄). My intuition just tells me that the first way might be more safe because the second way state (in this case slugs ) might be overwritten?

Edit: This questions has been flagged as a duplicate of this question , but it is inherently different, because I was wondering about the functionalities of setState and not about how TypeScript's type annotation works. I merely provided the TypeScript types for clarity. I'm sorry this question caused confusion. English is not my main language and I didn't know how to express this more clearly. Luckily someone understood and answered the question perfectly.

Answer 1

If you look into the source code, especially into setState and enqueueSetState , you can see the following piece of code:

if (typeof partialState === 'function') {
  partialState = partialState.call(
    pu blicInstance,
    currentState,
    publicInstance.props,
  );
}

// Null and undefined are treated as no-ops.
if (partialState === null || partialState === undefined) {
  return;
}

this._renderer._newState = {
  ...currentState,
  ...partialState,
};

What that means is that

this.setState(({ expanded }) => ({ expanded: !expanded }));

will end up being:

state = {...prevState, {expanded: !expanded}}

and

this.setState(prevState => ({ ...prevState, expanded: !prevState.expanded }));

will end being:

 state = {...prevState, ...{...prevState, expanded: !prevState.expanded}}

I think the second one is basically poor understanding on how the updater function works.

Answer 2

正如React的官方文档状态更新被合并所说，React会将您提供的对象合并到当前状态，而不是覆盖整个状态。

Answer 3

Both the statement would result in the same behavior - updation of expanded value. If you read through the setState method's documentation, React expect the method to return the value that needs to be overridden. React merges the return of the method to the previous state object and does a diff. In the first clause, all the other state variables are the same, except the expanded and in the second clause, only expanded is mutated.

Answer 4

To understand with the second code, you may look in attached duplicate post , but I found your case a little bit different. Thus, answering here.

this.setState(prevState => ({ ...prevState, expanded: !prevState.expanded }));

Here, the use of ...prevState is just unnecessary. It's because react's setState handles the particular state and merge other states.

this.setState(prevState => ({ expanded: !prevState.expanded }));

You'll only need to use merging when you'll need to update the properties nested in the particular state. For example, if you have something like:

state = {
  people: {
   male: 1033,
   female: 234,
   other: 100
  }
}

Now, in this case you may merge people value when you only update the male count like:

this.setState(prevState => ({ people: { ...prevState.people, male: 1045 } }))

Which can simply be written destructuring like:

this.setState(({people}) => ({ people: { ...people, male: 1045 } })