javascript - react + useState() + previousState

Question

我对 react 很陌生，并且在理解 useState Hook 方面存在问题 - 或者更具体地说是previousState 的方面。
一个普通的 useState Hook，可能是最常见的例子，如下所示:

import React, { useState} from 'react';

export default function CounterHooks({ initialCount }){
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <button onClick={() => setCount(count -1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

到目前为止，我所理解的内容如下:

我调用 useState() 函数/Hook？并传入初始状态的参数(initialCount)

我取回了一个数组，我立即将其破坏为变量 count 和 setCount (
是函数)

使用 setCount() 我可以更新状态，因此计数变量

到目前为止一切顺利，我认为... ;)
有时我会看到与 prevState (prevCount) 相同的反例，但我不明白:

<button onClick={() => setCount(prevCount => prevCount -1)}>-</button>

这里会发生什么？这部分我不明白。
到目前为止我的想法:

在这种情况下，我以某种方式访问​​了先前的计数值。

setCount 现在需要一个函数

setCount 现在异步运行

这个函数是从哪里来的？

prevCount 来自哪里？

当我运行它时，将什么放入 prevCount？

你明白我的困惑吗？我不知道我应该如何以不同的方式构建这个......
非常感谢您的帮助。

Answer 1

首先可以看官方解释here .

In this case, I somehow access the previous count value.

您没有以某种方式访问​​先前的计数值。如果您使用功能更新并向 setter 提供回调函数，它会将先前的状态返回给您，并且您在回调函数中使用此值。

setCount expects now a function

既然你提供了一个函数，它就可以使用它。

setCount is now run asynchron

实际上，没有。它不是一个异步函数。它只是提供以前的状态，您可以使用它。状态 setter 不是异步的，状态更新是异步的。

Where is this function coming from?

Where is prevCount coming from?

已经回答了。

When i run this, what is put into prevCount?

您提供您想要在那里设置新状态的内容。在您的示例中，您希望增加 count 1，所以您提供 + 1这是对这种逻辑的天真解释。只是一个天真的。 我添加这个来举例说明回调逻辑，这与 React 的 setState. 无关

let state = 5;

function setState(val) {
  if (typeof val === "function") {
    return val(state);
  }

  return val;
}

const stateWithFunctionalUpdate = setState(prev => prev + 1);
const stateWithNormalUpdate = setState(9);
console.log(stateWithFunctionalUpdate);
console.log(stateWithNormalUpdate);

也许这个例子适合模仿 React 的状态设置逻辑。同样，这只是一种幼稚的方法。

let state = 5;

function setState(val) {
  if (typeof val === "function") {
    state = val(state);
  } else {
    state = val;
  }

}

setState(9);
setState(prev => prev + 1);

console.log("state", state);

我们来看看 real implementation的 useState (没有打字):

export function useState(initialState) {
  return useReducer(
    basicStateReducer,
    // useReducer has a special case to support lazy useState initializers
    initialState
  );
}

好吧，它只使用 useReducer窗帘后面。它设置初始状态并使用 basicStateReducer这是:

function basicStateReducer(state, action) {
  return typeof action === "function" ? action(state) : action;
}

就像我们的幼稚方法一样，它查找 action 的类型。并据此行事。最后，这是 useReducer returns :

return [workInProgressHook.memoizedState, dispatch];

所以，归根结底，如果我们提供一个函数到 useState ，它接受它，然后在我们的状态上运行它并返回值。