为什么在没有声明的情况下调用 useState 函数？ [关闭]答案

【问题标题】：Why calling useState function is working without declaring it? [closed]为什么在没有声明的情况下调用 useState 函数？ [关闭]
【发布时间】：2020-04-18 09:58:10
【问题描述】：

我很难理解下面示例中调用 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:  }

【问题讨论】：

什么？！ setCount 函数 已声明，它是第 4 行从 useState 返回的值之一。您的标题询问调用 useState，您大概是通过从 react 的导入声明的。
reactjs.org/docs/…

标签： reactjs ecmascript-6 react-hooks

【解决方案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);

【讨论】：

【解决方案2】：

这种模式称为 Destructuring_assignmen。 useState 钩子返回一个值元组和一个改变该值的函数，您在解构 useState 的返回元组时声明这些返回元素的名称。你可以看看这个解释：

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

【讨论】：

是的，没错。我不明白为什么“setCount”的返回自动是括号中的参数？直觉上我会这样写： () => setCount(counter) { (counter + 1) return counter };这是： () => setCount(count + 1);捷径？
一个朴素的 useState 实现是这样的： function useState(initialState) { let state = initialState;函数 setState(newState) { state = newState; } 返回 [状态，设置状态]； } 这就是突变函数按原样工作的原因。

【解决方案3】：

setCount 函数是在这一行中声明的

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

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

【讨论】：

是的，没错。我不明白为什么“setCount”的返回自动是括号中的参数？直觉上我会这样写： () => setCount(counter) { (counter + 1) return counter };这是： () => setCount(count + 1);捷径？
@coasterrel 你会凭直觉写的东西没有意义。您是否尝试声明名为 setCount 的 另一个 函数？在尝试添加 React 之前，您应该真正学习基本的 JavaScript 和 ES6 语法。
@jonrsharpe 虽然是真的，但评论可能没有您预期的那么有用。如果有人不知道他们不知道什么?......我试图在我的回答中提供解释。
我删除了我对第二个问题的回答，因为@jonrsharpe 一次只执行一个问题 - 如果有人想回答另一个问题，请通知我。