使用 React.memo 防止重新渲染

如何解决使用 React.memo 防止重新渲染

我构建了一个网络应用程序，其中用户拥有不同页面的个人资料。在所有页面中都有个人资料图片和横幅，我希望它们只呈现一次。

现在，每次用户更改页面时，都会刷新个人资料图片和横幅。我想阻止这个。

现在的工作方式：

我想要的：

我一直在玩 React.memo，但我无法让它工作。

每个父页面（预设、商店和课程）获取所有数据（个人资料图片、横幅...）。

然后我将数据传递给子组件 Banner 和 ProfilePicture。

这是我的横幅组件代码（横幅道具是一个网址类型的字符串）：

import React,{ useState,useEffect } from 'react';
import { Container,Row,Col} from "react-bootstrap";

const Banner = ({banner}) => {

const [width,setWidth] = useState(window.innerWidth);
const breakpoint = 620;


useEffect(() => {
    window.addEventListener("resize",() => setWidth(window.innerWidth));
},[])

return ( 
    <>
        <Container style={{ maxWidth: "100%" }}>
            <Row>
                <Col className="pl-0 pr-0">
                    {width < breakpoint ?
                        <div
                        style={{
                            backgroundImage: `url(${banner})`,backgroundSize: "cover",backgroundPosition: "center center",height: "40vw",display: "flex",alignItems: "center",}}
                        className="justify-content-center"
                        >
                        
                        </div>
                    :    
                        <div
                        style={{
                            backgroundImage: `url(${banner})`,height: "25vw",}}
                        className="justify-content-center"
                        >
                        
                        </div>
                    }
                </Col>
            </Row>
        </Container>
    </>
 );
}

export default React.memo(Banner);

在父组件（所有页面）中，我获取数据并将其传递给横幅组件，如下所示：

<Banner banner={banner}/>

我认为横幅首先是未定义的，然后是获取的 url，因此道具每次从未定义更改为字符串，这就是 React 备忘录不起作用的原因。

我不知道如何解决这个问题。

解决方法

我已经解决了我自己的问题。我不确定这是最好的答案，但这就是我所做的：

使用 react-router 我添加了这个路由：/:username/:page

然后我使用 props.match.params.page 访问页面名称并根据它更改子组件。