Question

我无法让 React 的“useMemo”依赖数组正常工作

2022-04-08

3478

reactjs react-hooks react-usememo

我试图理解 React Hooks 中的依赖项是如何工作的。听起来很简单，但在下面的人工示例中，当通过单击“完成”文本更新变量时，我无法打印备忘录。

我相信如果那些是 React 的 setState 变量，它们会起作用。我见过在依赖项数组中给出简单变量的示例。

实际用例与 useTable 结合使用。在大多数情况下，它会陷入递归循环（例如使用 fooArr 作为依赖项）。所以我试图将其提炼出来，看看我遗漏了什么。

谢谢 Matt

import { useMemo } from "react";

export default function Page(props) {
    const fooArr = [1]
    const num = 2

    function update(){
        ++num
        fooArr.push(2)
        console.log("Update")
        console.log(num)
        console.log(fooArr.length)
    }

    useMemo(() =>  { console.log("Memo"); return {}}, [fooArr, fooArr.length, num])

    return <div onClick={update}>done</div>;
}

Answer 1

这里有几个问题。

组件仅在调用状态设置器时重新渲染。如果您从未在应用程序中的任何地方调用状态设置器，React 将永远不会重新渲染。
即使您确实在某个时候调用了状态设置器，您的 fooArr 和 num 变量也会在组件每次运行时声明，并且在渲染过程中完全相互独立 - 它们不是有状态的，因此将它们放入依赖项数组中是没有意义的。改为使它们有状态，并调用它们的状态设置器，而不是重新分配或改变它们。

function Page(props) {
    const [fooArr, setFooArr] = React.useState([1]);
    const [num, setNum] = React.useState(1);
    function update(){
        setNum(num + 1);
        setFooArr([...fooArr, 2]);
        console.log("Update")
    }

    React.useMemo(() =>  { console.log("Memo"); return {}}, [fooArr, fooArr.length, num])

    return <div onClick={update}>done</div>;
}

ReactDOM.render(<Page />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>