如何调整React代码使目标日志仅在点击重置按钮时输出？

问题：需要修改以下React代码，让日志语句console.log("This should log only on resetting the number")仅在点击「Reset number」按钮时输出，点击「Rerender」按钮时不触发。

原代码：

import * as React from "react";
import { render } from "react-dom";

const getNumber = () => Math.round(Math.random() * 100);

const useNumber = () => {
  const [value, setValue] = React.useState<number>(getNumber());

  const isLargerThan = React.useMemo(() => {
    const func = (i: number) => {
      console.log("This should log only on resetting the number");
      return value > i;
    };
    return func;
  }, [value]);

  const reset = () => setValue(getNumber());

  return { value, isLargerThan, reset };
};

const App = () => {
  const number = useNumber();
  const [trigger, setTrigger] = React.useState(false);

  console.log("rerendering");

  return (
    <div>
      <div>
        Is {number.value} larger than 50?: {String(number.isLargerThan(50))}
      </div>
      <button onClick={number.reset}>Reset number</button>
      <button onClick={() => setTrigger(!trigger)}>Rerender</button>
    </div>
  );
};
const rootElement = document.getElementById("root");
render(<App />, rootElement);

修改方案 #

将日志语句从isLargerThan函数内部移到useMemo的顶层回调中。这样只有当value更新（点击「Reset number」）时，useMemo才会重新执行并触发日志；点击「Rerender」时value未变化，useMemo复用缓存的函数，调用函数不会触发日志。

修改后的代码：

import * as React from "react";
import { render } from "react-dom";

const getNumber = () => Math.round(Math.random() * 100);

const useNumber = () => {
  const [value, setValue] = React.useState<number>(getNumber());

  const isLargerThan = React.useMemo(() => {
    // 日志移到这里，仅在value变化时执行
    console.log("This should log only on resetting the number");
    const func = (i: number) => {
      return value > i;
    };
    return func;
  }, [value]);

  const reset = () => setValue(getNumber());

  return { value, isLargerThan, reset };
};

const App = () => {
  const number = useNumber();
  const [trigger, setTrigger] = React.useState(false);

  console.log("rerendering");

  return (
    <div>
      <div>
        Is {number.value} larger than 50?: {String(number.isLargerThan(50))}
      </div>
      <button onClick={number.reset}>Reset number</button>
      <button onClick={() => setTrigger(!trigger)}>Rerender</button>
    </div>
  );
};
const rootElement = document.getElementById("root");
render(<App />, rootElement);

原理说明 #

• useMemo的依赖数组是[value]，只有当value发生变化时，才会重新执行回调函数生成新的isLargerThan函数。
• 原代码中日志写在函数内部，每次调用isLargerThan都会触发日志；修改后日志仅在value更新时（即重置数字）才会执行，符合需求。

内容的提问来源于stack exchange，提问作者barciewicz