React.js useEffect和依赖关系数组
一个教程代码,调用一个状态改变函数,强制渲染(使用数组解构添加逗号)。
import React, { useEffect, useState } from "react";
const useAnyKeyToRender = () => {
const [ , forceRender ] = useState();
useEffect( () => {
window.addEventListener( "keydown", forceRender );
return () => window.removeEventListener( "keydown", forceRender );
}, [] );
};
export default function App() {
useAnyKeyToRender();
useEffect( () => {
console.log( "fresh render" );
} );
return <h1>Open the console</h1>;
}
在这个钩子中,我们不关心state值,只需要state函数:强制渲染。
我了解数组重构的工作原理
const [fruit, setFruit] = useState('banana');
等于
var fruitStateVariable = useState('banana'); // Returns a pair
var fruit = fruitStateVariable[0]; // First item in a pair
var setFruit = fruitStateVariable[1]; // Second item in a pair
我不明白这个密码是怎么运作的
const [ , forceRender ] = useState();
为什么第一个数组元素为空(忽略),为什么forceRender是第二个元素。
为什么不使用setForceRender?
如何调用forceRender?
我理解这个钩子的目的,但不理解依赖数组的技巧。
如果我这样做:console.log(forceRender)将显示:
ƒ bound dispatchAction() {}
<constructor>: "Function"
name: "Function"
我不明白这个钩子是怎么工作的,forceRender函数是怎么工作的。看起来很简单,但是我很困惑。
1条答案
按热度按时间rt4zxlrg1#
我似乎在网上找不到任何信息,所以我要给予你我认为正在发生的事情。我不是Maven,只是一个想提供他的观点的人。如果有人想纠正我,请做!
把它去掉:
让我们看看这行代码:
useState
的return语句如下所示:setState
位于索引1
处,我们请求将索引1
赋给setName
,并忽略索引0
。这就是我认为正在发生的事情。这可能是不正确的,甚至可能由于没有很好地记录而不为人所知(我甚至在MDN上找不到任何信息!),但这就是我认为正在发生的事情。