React 备忘录允许重新渲染到 forwardRef

Question

我有一个组件定义为

export default function MyComp({
    ...someprops
}) {
    const [data, setData] = useState([]);
    const searchRef = useRef();

    return (
        <Box>
            {!showEmptyState ? (
                <LzSearch
                    onUpdate={(items) => setData(items)}
                    ref={searchRef}
                />
            ) : (
               <Box />
            )}

        </Box>
    );
}

LzSearch 定义为

const LzSearch = forwardRef((props, ref) => {
    const {       
        ...rest
    } = props;
    const classes = useStyles();
    const hashData = {};

    console.log(hashData);

    function updateHashData() {
       // Function is called at some point after getting data from API
       setHashData(...);
       onUpdate(...)
    }

    return (
        <Box>
            {`Some components`}
        </Box>
    );
});

export default memo(LzSearch);

调用 onUpdate() 后，我的主要组件已更新，但它随后会重新呈现我的 LzSearch 组件并重置 hashData。我已经添加了备忘录，但是它在做同样的事情。

如何避免重新渲染。

Answer 1

这与裁判无关。 LzSearch 正在重新渲染，因为 onUpdate 道具正在更改。 MyComp 将需要使用 useCallback 来保持渲染之间的 onUpdate 函数相同：

export default function MyComp({
    ...someprops
}) {
    const [data, setData] = useState([]);
    const searchRef = useRef();

    const onUpdate = useCallback((items) => {
      setData(items);
    }, [])

    return (
        <Box>
            {!showEmptyState ? (
                <LzSearch
                    onUpdate={onUpdate}
                    ref={searchRef}
                />
            ) : (
               <Box />
            )}

        </Box>
    );
}

re-render my LzSearch component and resetting the hashData

请注意，memo 只是一种性能优化工具，而不是一种修复错误的方法。如果由于某种原因碰巧重新呈现，您的组件需要正常工作。 memo 可能会停止一些渲染，但它不能保证组件永远不会重新渲染。即使使用 useMemo 也可能导致重新渲染的示例包括：更改道具、更改状态、更改上下文、严格模式的双重渲染功能、并发模式中止然后重复组件树的一部分。

React 备忘录允许重新渲染到 forwardRef

React memo allowing re-rendering to forwardRef

reactjs

react-functional-component