时间戳

首页 > 解决方案 > useMemo 在每次渲染时调用函数

reactjs - useMemo 在每次渲染时调用函数

问题描述

我无法让 useMemo 做出反应。看看下面这个非常简单的 react 应用程序：

import React, { useMemo } from "react";

const testfunc = () => {
  console.log("testfunc");
  return true;
};

function App() {
  const a = useMemo(() => testfunc(), []);

  return <div className="App">My App</div>;
}

export default App;

您认为“testfunc”应该出现在控制台中多少次？它应该是一个，但它以两个的形式出现。我究竟做错了什么？

标签： reactjsreact-hooks

解决方案

让我们检查一下：你testfunc在其他地方打电话吗？如果没有，你的值被记住了。testfunc只会在初始化 App 组件时调用一次：

让我们看看我的例子，只需使用状态每 1 秒重新渲染一次组件。

import React, { useMemo, useState } from "react";

const testfunc = () => {
    console.log("testfunc");
    return true;
};

function App() {
    const [state, setState] = useState(false);
    const a = useMemo(() => testfunc(), []);
    console.log(a);

    useEffect(() => {
        setInterval(() => setState(!state), 1000);
    }, [])

    return <div className="App">My App</div>;
}

推荐阅读