何时使用 useState() 钩子的功能更新形式，例如。 setX(x=>x+1)

Question

通常，当我们需要更新功能组件中的状态时，我们会这样做：

function Example() {
    const [count, setCount] = React.useState(0);
    return (<div><p>You clicked {count} times</p>
                 <button onClick={() => setCount(count + 1)}>
                    Click me
                 </button>
            </div>);
}

何时以及为什么需要使用功能更新表单？

function Example() {
    const [count, setCount] = React.useState(0);
    return (<div><p>You clicked {count} times</p>
                 <button onClick={() => setCount(c=>c + 1)}>
                    Click me
                 </button>
            </div>);
}

Answer 1

当 setter 可能会关闭旧的状态值时，请使用函数形式。

例如，如果发起异步请求，并且您希望在完成后更新状态，则发出的请求将具有请求开始时的状态范围，这可能与大多数请求不同。最新的渲染状态。

如果刚刚更新了相同的状态值，您可能还需要使用函数形式，例如

setValue(value + 1);
// complicated logic here
if (someCondition) {
  setValue(value => value + 1);
}

因为setValue的第二次调用关闭了旧的值。

Answer 2

状态更新可能是异步的：

https:// 在这种情况下， reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

useState 与 setState 相同。

Answer 3

两次调用 set state 时可以看到不同的情况：

<button
  onClick={() => {
    setCount(count + 1);
    setCount(count + 1);
  }}
></button>;

<button
  onClick={() => {
    setCount(c => (c + 1));
    setCount(c => (c + 1));
  }}
></button>;

Answer 4

还有其他用例。例如，当您在效果内调用 useState 时。如果新状态依赖于旧状态，则可能会导致无限循环。

useEffect(() => {
  setCounter(counter + 1);
}, [counter]);

您可以通过使用功能更新来避免这种情况：

useEffect(() => {
  setCounter(old => old + 1);
}, []);

Answer 5

功能更新形式还允许将更新函数传递给其子级，同时仍然可以访问父级的状态。

function MyButton(props){
     // return <button onClick={()=>props.onClick(count+1)}>+1</button>;  // error as count is not exposed here
     return <button onClick={()=>props.onClick(n=>(n+1))}>+1</button>;
}
function Example() {
   const [count, setCount] = React.useState(0);
   return (<div><p>Counter: {count}</p>
                <MyButton onClick={setCount}/>
           </div>);
}
ReactDOM.render(<Example/>,document.querySelector("div"));

Answer 6

据此：https://reactjs。 org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

功能更新 表单确保您引用的先前状态是可能有最新/最终版本调用多个 setState 挂钩（异步）（例如，如果用户垃圾点击按钮）

并且由于其异步性质，状态不会立即在函数内更新，例如：

func() {
 console.log(counter) // counter = 1
 setCounter(counter => counter + 1) // counter = 1
 console.log(counter) // counter = 1
}