可以在匿名 function 中使用 useMemo 吗？

Question

您可以在匿名 function 中安全地利用useMemo吗？

import {useCallback, useMemo} from "react";

function Component(props) {
  const [scollLeft, setScrollLeft] = useState(0); // dictates which elements are visible on screen

  const onScroll = useCallback(({scrollLeft}) => {
    setScrollLeft(scrollLeft);
  }, [])

  const itemToElement = useCallback((item) => {
    return useMemo(() => generateElementFrom(item), [item]); // <-- anonymous useMemo !
  }, []);

  const visibleItemsOnScreen = useMemo(() => {
    return props.items.filter(item => isVisible(item));
  }, [scrollLeft, props.items]);

  const visibleElementsToRender = useMemo(() => {
    return visibleItemsOnScreen.map(x => itemToElement(x));
  }, [visibleItemsOnScreen]);

  return <>{visibleElementsToRender}</>;
}

以上内容是否可靠地记住了每个item生成的elements ？

Answer 1

首先，您关于执行顺序的示例有点误导。 您必须无条件使用所有钩子，它不必是功能组件中的第一行代码。

关于问题，您不能在回调中使用useMemo （有或没有useCallback ）

规则是：

React Hook "React.useMemo" cannot be called inside a callback.
React Hooks must be called in a React function component or a custom React Hook function. (react-hooks/rules-of-hooks)

原因是 React 将每个组件的 state 分开。 并且为了“知道”每个钩子的 state，它使用执行顺序。 在条件中使用钩子会打乱钩子的顺序，并且 React 将无法将以前的 state 与新的 state 匹配。

useCallback不是 React 组件，React 不会管理它的内部钩子 state，所以你不能在useCallback中使用useMemo