Question

我在 React 中有以下父组件；

const Landing = () => {
    const { setHash, fetchError, fetchingMenu, fetchingConfig, fetchingCart, 
SelectedMenuSet, SelectedMerchant, Config } = useContext(DataContext);

    const hash = getHash();

    useEffect(() => {
        if (hash) setHash(hash);
    }, [hash, setHash])

    if (!hash) return <Error ReturnCode={600} Language={getBrowserLanguage()} />
    if (fetchingConfig || fetchingCart || fetchingMenu) return <Spinner />;
    if (fetchError) return <Error ReturnCode={fetchError} 
Language{getBrowserLanguage()}/>

    if (SelectedMenuSet.Layout === MenuLayout.Tile) return <Redirect to={'/tile'} />;
    else {
        if (Config.ShowMerchantList && !SelectedMerchant) return <Wellcome />

        return <Redirect to={`${hash}/carousel/0`} />;
    }}

export default Landing;

我有一个加载页面；

const Spinner = () => {
    const classes = useStyles();

    console.log("rerender")

    return (
        <ThemeProvider theme={theme}>
            <div className={classes.spinner}>
                <img className={classes.logo} alt="Logo" src={logo} />
                <br />
                <LinearProgress className={classes.progress} />
            </div>
        </ThemeProvider>
    );
}

export default memo(Spinner);

我的 DataContext 上有一些状态，我根据这些状态在着陆页中呈现不同的页面。加载页面取决于这些状态。例如，我在 DataContext 中获取菜单及其配置，当我开始获取时，我将 fetchingMenu 设置为 true。当这些状态发生变化时，我的子组件会重新呈现自身。我试图用 React.memo 解决这个问题，但没有奏效。

除了 memo 或 useMemo 之外，是否有任何解决方案可以解决这种重新渲染？如果没有我如何用备忘录解决这个问题？

如何防止重新渲染没有道具的子组件？

0 个答案: