javascript - React 中setState 的这两种updater 函数是否相等？

Question

我最近了解到 updater functions用于 React 中的 setState。

现在我已经看到这个概念以两种不同的方式使用。假设我们有一个这样的状态对象:

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

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

我见过像这样使用的更新程序函数:

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

像这样:

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

我已经自己尝试过，看看使用两者之间是否有区别，但我找不到(除了字符数 😄)。我的直觉告诉我，第一种方式可能更安全，因为第二种方式 state(在本例中为 slugs)可能会被覆盖？

编辑:此问题已被标记为与 this question 重复的问题，但它本质上是不同的，因为我想知道 setState 的功能，而不是 TypeScript 的类型注释是如何工作的。为了清楚起见，我只是提供了 TypeScript 类型。很抱歉这个问题造成了困惑。英语不是我的主要语言，我不知道如何更清楚地表达这一点。幸运的是有人理解并完美地回答了这个问题。

Answer 1

如果您查看源代码，尤其是 setState和 enqueueSetState ，你可以看到下面这段代码:

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,
};

那是什么意思

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

最终会是:

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

和

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

将结束为:

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

我认为第二个基本上是对更新程序功能如何工作的理解不足。