reactjs React.js useEffect和依赖项数组,使用反结构化useState

7rfyedvj  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(132)

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函数是怎么工作的。看起来很简单,但是我很困惑。

rt4zxlrg

rt4zxlrg1#

我似乎在网上找不到任何信息,所以我要给予你我认为正在发生的事情。我不是Maven,只是一个想提供他的观点的人。如果有人想纠正我,请做!

把它去掉:

让我们看看这行代码:

// This isn't really useful but for the sake of this explanation
const [, setName] = useState("John")

useState的return语句如下所示:

function useState(initialState) {
    // other code here
    return [state, setState]
}

setState位于索引1处,我们请求将索引1赋给setName,并忽略索引0。这就是我认为正在发生的事情。这可能是不正确的,甚至可能由于没有很好地记录而不为人所知(我甚至在MDN上找不到任何信息!),但这就是我认为正在发生的事情。

相关问题