Question

在下面的示例中，我难以理解调用setCount函数的语法。 setCount函数从未声明过，所以为什么在这里调用它？

 3:  function Example() {
 4:    const [count, setCount] = useState(0);
 5:
 6:    return (
 9:        <button onClick={() => setCount(count + 1)}>
10:         Click me
11:        </button>
13:    );
14:  }

Answer 1

useState()返回一对值：状态和更新状态的函数。

 const [count, setCount] = useState(0);

因此count是状态，setCount是对其进行更新的函数。 useState已经为您准备好了一个状态更新功能。您无需显式编写状态。

setCount(modifiedValue)会将计数设置为修改值

示例代码：

UseState不能完全做到这一点，但这是为了理解

const useState=()=>{
 return [ "createdReactState",(value)=>{
//react's internal code for modification of state"
console.log("Im here for modifying the state ",value) 
}]
}

//destructing assignment
const [count, setCount] =useState()
setCount(2);

更多内容：https://reactjs.org/docs/hooks-state.html#declaring-a-state-variable

Answer 2

此模式称为Destructuring_assignmen。 useState钩子返回一个值的元组和一个使该值变异的函数，您可以在销毁useState的返回元组的同时声明这些返回元素的名称。您可以查看以下说明：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 3

setCount函数在此行中声明

const [count, setCount] = useState(0);

这是useState的语法：数组的第一个元素是您的状态变量，第二个元素是将值设置为状态变量的函数。希望一切都清楚。

为什么在不声明useState的情况下调用useState函数呢？

3 个答案: