在React State Hooks中,可以编写下面的代码行来设置一个名为count
的状态变量,然后编写setCount
函数来设置该值,如下所示:
const [count, setCount] = useState(0);
这就相当于写:
this.state = { count: 0 };
我的问题是,useState()
函数如何从ES6解构赋值语句中获得状态变量的名称--在本例中为count
?
- destructuing* 不是在函数返回值之后发生吗?或者,当函数被调用时,是否可以在函数内部动态地获取被析构的值?
更新
请注意,我确实理解我可以解构为我想要的任何名称,但是useState()
如何知道哪个变量应该进入 state,以便稍后使用。
例如,如果我设置了两个状态变量,如果useState()
函数不知道变量名,它如何区分这两个值?
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
4条答案
按热度按时间mbjcgjjk1#
当使用函数组件和useState时
您只能使用myCountVariable变量访问数据,而不使用this.state。
如果我没理解错的话,你不明白的是它怎么知道要写入'this.state.myCountVariable' --它不知道。状态不存储实际的变量名。
就像我上面的帖子所说的,useState假设每次组件调用它时,它都会以相同的顺序调用它,所以它会基于索引返回“变量持有者”。
在React文档中,您可以看到它们在React Hook规则中引用了这一点:
仅在顶层调用挂钩不要在循环、条件或嵌套函数中调用挂钩。相反,始终在React函数的顶层使用挂钩。通过遵循此规则,您可以确保每次组件呈现时都以相同的顺序调用挂钩。这就是为什么React可以在多个useState和useEffect调用之间正确地保留挂钩的状态。(如果您感兴趣,我们将在下面详细解释。)
基本上,
更准确地表示为
(重新创建函数组件时,currentStateIndex将重置为0)
gpnt7bae2#
它返回一个被析构的数组。数组的第一个索引是值,第二个索引是函数。通过数组析构,你可以为这些变量设置一个名称
示例:
更多信息请访问:https://medium.freecodecamp.org/array-destructuring-in-es6-30e398f21d10
hec6srdp3#
useState
返回一个数组,其中第一个元素是值,第二个元素是setter,使用de-structuring
可以为它给予任何名称例如,上面的代码等效于
gt0wga4j4#
JS中数组的反结构是通过索引而不是属性名完成的。只有对象的反结构是通过属性名完成的。