setState中的神秘参数，为什么会起作用？

Question

完成 TypeScript + React 课程并构建待办事项列表。不过，我的问题是关于反应功能。在添加 Todo 的处理程序中，在 setState 中声明了这个函数const App: React.FC= () => {  const [todos, setTodos] = useState<Todo[]>([])  const todoAddHandler = (text: string) => {    // when its called.... where does the prevTodos state come from?    setTodos(prevTodos => [...prevTodos,       {id: Math.random().toString(), text: text}])  }  return (    <div className="App">      <NewTodo onAddTodo={todoAddHandler}/>      <TodoList items={todos}></TodoList>    </div>  );}export default App;当在setState中调用该函数时，它会自动调用当前状态。这只是 setState 的一个特性吗？如果你在其中声明一个函数，参数将始终是函数被调用时的当前状态？当这个参数刚刚...工作时非常困惑。:#

Answer 1

这只是 setState 的一个特性吗？- 是的

useState是一种使用与 this.state 在类中提供的功能完全相同的功能的新方法

这意味着它的核心仍然依赖于旧this.setState({})功能。如果你记得使用this.setState()，你就会知道它有一个可用的回调函数，可以这样使用：

this.setState((currentState) => { /* do something with current state */ })

现在已经转移到useStatehook 的第二个解构项[item, setItem] setItem，因此它具有相同的功能：

setItem((currentState) => { /* do something with current state */ }

Answer 2

通过钩子，React 包含每个状态名称到其当前值的内部映射。和

const [todos, setTodos] = useState<Todo[]>([])

每当setTodos调用并todos再次设置状态时，React 都会将内部状态更新为todos新值。useState调用时，它还将返回变量的当前内部状态。

你可以这样想：

// React internals

let internalState;

const setState = (param) => {

  if (typeof param !== 'function') {

    internalState = param;

  } else {

    param(internalState);

  }

};

const useState = initialValue => {

  internalState ??= initialValue;

  return [internalState, setState];

}

然后，当您调用状态设置器时，您可以向它传递一个普通值（更新internalState），或者您可以向它传递一个函数，该函数在被调用时将当前内部状态作为第一个参数传递。

请注意，该prevTodos参数将包含当前状态，包括中间更新。例如，如果您setTodos在重新渲染发生之前同步调用两次，则您需要第二次使用回调形式才能“看到”第一次调用setTodos.