Question

我有一个MarketOverview组件，用于渲染一堆加密货币交易对市场。初始化时，我希望它默认呈现BTC/USD市场，这是通过useEffect()完成的。问题是defaultMarket在每个渲染上都被调用。此外，defaultMarket依赖于tickers道具，因此如果我将其包装在useMemo()中，则eslint react-hooks插件会自动填充tickers作为依赖项。

没有useMemo()：

const defaultMarket = tickers.find((ticker) => {
    return ticker.market_id === "BTC-USD";
  });

使用useMemo()：

const defaultMarket = useMemo(
    () =>
      tickers.find((ticker) => {
        return ticker.market_id === "BTC-USD";
      }),
    [tickers]
  );

整个组件：

export const MarketOverview = memo(({ tickers }: TProps) => {

  // Set default market on initialisation to BTC/USD
  const defaultMarket = tickers.find((ticker) => {
    return ticker.market_id === "BTC-USD";
  });

  const [selectedMarket, setSelectedMarket] = useState<ITicker | undefined>(
    undefined
  );

  useEffect(() => {
    setSelectedMarket(defaultMarket);
  }, [defaultMarket]);

  // Select market
  const selectMarket = (market: ITicker) => {
    history.push(`${PUBLIC_URL}/markets/${market.market_id}`);
    setSelectedMarket(market);
  };
  return (
    <div className="market-overview-container">
      <MarketSelector
        tickers={tickers}
        selectMarket={selectMarket}
        selectedMarket={selectedMarket}
      />
      {selectedMarket && <MarketStats selectedMarket={selectedMarket} />}
    </div>
  );
});

Answer 1

为什么，如果defaultMarket更新，就永远不会重新计算tickers。

但是，如果您确实愿意，可以为该行添加eslint禁用，并使用一个空的依赖项数组，以便该挂钩仅在组件安装时运行一次。

const defaultMarket = useMemo(
  () =>
    tickers.find((ticker) => {
      return ticker.market_id === "BTC-USD";
    }),
  // eslint-disable-next-line react-hooks/exhaustive-deps
  []
);

希望在首次渲染时设置一次状态，而不会在进一步更新时引起不必要的重新渲染

1 个答案: