Question

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

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

现在的工作方式：

我想要的：

我一直在玩 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})`,
                            backgroundSize: "cover",
                            backgroundPosition: "center center",
                            height: "25vw",
                            display: "flex",
                            alignItems: "center",
                        }}
                        className="justify-content-center"
                        >
                        
                        </div>
                    }
                </Col>
            </Row>
        </Container>
    </>
 );
}

export default React.memo(Banner);

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

<Banner banner={banner}/>

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

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

Answer 1

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

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

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

使用 React.memo 防止重新渲染

1 个答案: