javascript - 何时使用 useState() 钩子(Hook)的功能更新形式，例如。集合X(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 的第二次调用关闭了旧的 value。