Question

因此，我只是抓住了useMemo和useCallback的窍门，然后四处逛逛看看事情如何进行。在这种情况下，我要做的就是不要在父级发送相同对象时渲染Child。

这是我的父级组件：

def getTickData(dict){
 curDate = dict.TradingDay
 curID = dict.InstrumentID
 curProductID = curID.left(2)
 return select TradingDay, UpdateTime, InstrumentID, LastPrice from loadTable("db", "table") where TradingDay = curDate, ProductId =curProductID, InstrumentID = curID
}

这是我的孩子，尽管“ myObject”的内容相同，但每次单击都会重新呈现。（我知道引用每次都会更改，但是我的理解是useMemo所做的事情）


const Parent = () => {
  const [value, setValue] = useState(0);
  const handleOnClick = e => {
    setValue(value + 1);
  };

  const myObject = useMemo(() => {
    return { value: value - value };
  }, [value]);

  return (
    <div>
      <h1>I am a parent</h1>
      <button onClick={handleOnClick}>
        Click on Me
      </button>
      <Child object={myObject} />
    </div>
  );
};

export default Parent;

Here is the Sandbox.

请让我知道我在做什么错，这种情况下的解决方案是什么？

Answer 1

依赖数组是控制备忘录中断的时间。如果该数组中的任何内容已更改，则备注将再次运行。 React只检查该数组，而不检查成品。

现在，您要告诉它在value更改时重新计算。如果value不是您想要的，则可以为数组提供其他内容。您的value - value示例没有多大意义，因为它永远不会改变，所以让我替换它，它会改变一半的时间：

const Parent = () => {
  const [value, setValue] = useState(0);
  const handleOnClick = e => {
    setValue(value + 1);
  };

  const halfValue = Math.round(value / 2);
  const myObject = useMemo(() => {
    return { halfValue: halfValue };
  }, [halfValue]);

  return (
    <div>
      <h1>I am a parent</h1>
      <button onClick={handleOnClick}>
        Click on Me
      </button>
      <Child object={myObject} />
    </div>
  );
};

现在，每单击一次便会重新计算一次便笺。

为什么useMemo不起作用？我使用错了吗？

1 个答案: