使用值或函数调用useState()？

Question

这并不是真正的问题，但我正在寻求一些新的理解

React.useState()

。

下面的程序按预期运行，但是我不确定这是否是执行任务的正确方法。

任务是使用

React.useState(0)

进行加减并在网页浏览器中显示变化。

function App(){
    const [myValue , setmyValue] = React.useState(0);
    function addValue(value){
        value = value + 1;
        return value;
    }
    function subValue(value){
        value = value - 1;
        return value;
    }
    function handleAdd(){
        //setmyValue( myValue + 1);
         setmyValue(addValue(myValue))
    }
    function handleSub(){
        setmyValue(myValue - 1);
    }
    return (
        <div>
            <button onClick={handleAdd}>+</button>
            <p>{myValue}</p>
            <button onClick={handleSub}>-</button>
        </div>
    )
}
ReactDOM.render(<App/>, document.getElementById("part1"));

如果将值

myValue

直接传递给

setValue()

函数是正确的，或者传递另一个函数是正确的方法，请提供任何建议。

Answer 1

您使用 useState 的方式很好，但您可以按照以下方式大大简化此代码：

function App(){
    const [myValue , setmyValue] = React.useState(0);
    
    return (
        <div>
            <button onClick={() => setmyValue(myValue++)}>+</button>
            <p>{myValue}</p>
            <button onClick={() => setmyValue(myValue--)}>-</button>
        </div>
    )
}
ReactDOM.render(<App/>, document.getElementById("part1"));

作为一个整体回答你的问题，对于简单的流程传递值，但如果你需要执行复杂的功能，请使用函数。

Answer 2

Você está usando correto，mas acho poderia simplificar mais，desse modo。

import React, { useState } from 'react';

const App = () => {
  const [myValue, setMyValue] = useState(0);

  const handleAdd = () => {
    setMyValue(prevValue => prevValue + 1);
  };

  const handleSub = () => {
    setMyValue(prevValue => prevValue - 1);
  };

  return (
    <div>
      <p>{myValue}</p>
      <button onClick={handleAdd}>+</button>
      <button onClick={handleSub}>-</button>
    </div>
  );
};

export default App;

Answer 3

传递另一个函数

IIUC，你参考你的代码示例：

//setmyValue( myValue + 1);
setmyValue(addValue(myValue))

在这种情况下，准确地说，您不是传递函数，而是传递值，它是执行函数的结果(

addValue(myValue)

)。

在这种情况下，正如DevonRay的回答所暗示的那样，这似乎有点矫枉过正，但如果

addValue

执行更复杂的操作，这样做不会有什么错。

---

现在实际上可以将“更新器”功能传递给您的setmyValue

状态设置器：

如果您将函数作为

nextState

 传递，它将被视为 

更新函数。它 [...] 应该将挂起状态作为唯一的参数，并且应该返回下一个状态。

这实际上就是您的

addValue

 函数的作用：

function addValue(value) { // Takes the pending state as only parameter
  value = value + 1;
  return value; // Returns the next state
}

因此可以将

对函数的引用传递给状态设置器以使用更新器模式：

setmyValue(addValue); // addValue is NOT executed right away, you just pass its reference 就您的情况而言，不会有任何明显的差异，但让我们用稍微不同的场景来说明：假设您想将

2

 （而不是 

1

）添加到您的值中：

我们当然可以做

setmyValue(myValue + 2)

，它确实有效，故事结束了。

但是人们也可以尝试这样做：

setmyValue(myValue + 1);
setmyValue(myValue + 1); // Try adding 1 again, so that in total 2 is added

在这种情况下，它将

不会按预期工作：新状态只会增加1

，因为最后一次调用

setmyValue

状态设置器仍然使用“过时”版本的

myValue

，即与第一次调用之前的值相同，就好像后者没有任何效果一样。毕竟，

myValue

 是 

const

。

但是如果我们使用更新程序模式，至少对于下一次调用：

setmyValue(myValue + 1);
setmyValue(addValue); // Add 1 again

...现在可以了！

原因是 React 会将

addValue

 updater 函数传递给 

pending state，即第一次调用的实际结果。

请参阅链接文档中的示例以获取更多说明。