React - useState - 更新状态：值与函数

Question

我想知道在引用先前状态时传递值和传递函数以更新功能组件中的状态是否有任何区别，如下所示：

import React, { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  const [counter2, setCounter2] = useState(0);

  const increaseCounter = () => {
    setCounter(counter + 1);
  };

  const increaseCounter2 = () => {
    setCounter2(prevState => prevState + 1);
  };

  return (
    <div className="App">
      <h1>Counter: {counter}</h1>
      <button type="button" onClick={increaseCounter}>
        Increase
      </button>
      <h1>Another Counter: {counter2}</h1>
      <button type="button" onClick={increaseCounter2}>
        Increase
      </button>
    </div>
  );
}

官方文档在功能更新部分提到了这一点： https://reactjs.org/docs/hooks-reference.html#functional-updates

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

然而在这里，它使用了不同的方法： https://reactjs.org/docs/hooks-state.html

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

我认为在上面的一个非常基本的示例中，哪种方式并不重要，但可能会有一种情况 necessary/preferable 到另一种。

编辑：只是为了澄清我唯一的问题是关于以下之间的区别（何时使用）：

setCounter2(prevState => prevState + 1);

和

setCounter(count + 1);

我理解在真实示例中的这两种情况下，理想情况下它（即 setCounter）应该被带到一个单独的函数（而不是在 jsx 中内联编码）。

Answer 1

更新：

setCounter2(prevState => prevState + 1); 和

setCounter(count + 1);

存在差异，但取决于用例。您在示例中使用的方式没有区别。但是

// Example 1
useEffect(() => {
  setCounter(count + 1)
}, [count])

// Example 2
useEffect(() => {
  setCounter2(prevState => prevState + 1)
}, [])

在示例1中：useEffect有一个依赖要求是count。在示例 2 中：useEffect 没有任何依赖项要求，因为 prevState 是回调。

何时申请

如果 useEffect 仅取决于计数变化，则示例 1 应适用
如果 useEffect 有其他依赖项，但您不想在计数更改时触发 useEffect，则示例 2 应该适用


useEffect(() => {
  if(someOtherThingsChanged) {
    setCounter2(prevState => prevState + 1)
  }
  
}, [someOtherThingsChanged])

您可以在 here

中阅读更多内容

React - useState - 更新状态：值与函数

React - useState - update state: value vs function

reactjs

use-state