React渲染太多时间-我应该选择哪种架构

Question

我的问题：我正试图用React开发一个日历应用程序。我在左边的菜单和右边都有一个日历：每天都有一页。用户可以滑动到下一天(我使用Swiper.js，每天一张幻灯片(。URL必须包含日期信息(mysite.com/days/2020-12-05(和日历中突出显示的当前日期。我开发了一些有效的东西，但日常页面渲染的时间太长，而它们只需要渲染一次。

我的体系结构：

• day页面通过useParams((钩子从路由器获取日期参数
• 当用户滑动到另一天时，我使用window.history.pushState(days/new_date(，以便URL始终与当天一致
• 当用户滑动到另一天时，我会将日期发送到左侧菜单的日历中，以便在日历中突出显示当前日期。为了做到这一点，我使用了一个回调函数来更新根目录(App.js(的状态。然后，App.js用道具将日期级联到我的日历上。=>这会导致应用程序重新渲染整个应用程序，包括已经渲染的当天页面。这是没有用的

问题：我应该如何将日期参数从一个组件转移到另一个组件，而不会导致那些无用的重新渲染？我需要URL、左侧日历和滑动日页面始终同步，无论用户做什么：输入新的URL、在日历中选择日期或从一天滑动到另一天。

我的代码：(尽可能简化(

App.js

export default function App() {
const [date, setDate] = useState(0);
return (
<Router>
<div id="app_div">
<div id='left_menu'>
<ul>
// This is a simplified calendar: I can select 3 days and get the info of which date is currently selected
<li>
<Link to="/organisation/2020">2020</Link>
</li>
<li>
<Link to="/organisation/2021">2021</Link>
</li>
<li>
<Link to="/organisation/2022">2022</Link>
</li>
<li>
Current date: {date}
</li>
</ul>
</div>
<div id="right_frame">
<Switch>
<Route path="/Organisation/:day">
<Organisation setDate={setDate}></Organisation>
</Route>
<Route path="/Organisation">
<Organisation setDate={setDate}></Organisation>
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</div>
</Router>
);
}

Organization.js

export default function Organisation(props) {
let { day } = useParams();
if (day === undefined) {
day = 2020;
}
return (
<Swiper
initialSlide="1"
onSlideChange={(swiper) => OnSlideChange(swiper, props.setDate)}
>
<SwiperSlide daynb={parseInt(day) - 1}><Day day={parseInt(day) - 1}></Day></SwiperSlide>
<SwiperSlide daynb={parseInt(day)}><Day day={parseInt(day)}></Day></SwiperSlide>
<SwiperSlide daynb={parseInt(day) + 1}><Day day={parseInt(day) + 1}></Day></SwiperSlide>
</Swiper>
);
}
function OnSlideChange(swiper, setDate) {
window.history.pushState(null, "New Page Title", "/organisation/" + swiper.slides[swiper.activeIndex].attributes.daynb.value);
setDate(swiper.slides[swiper.activeIndex].attributes.daynb.value);
}

此处提供代码https://github.com/Toto5931/react-slides/tree/main/src

非常感谢！！！

Answer 1

React就是这样工作的-如果组件中的任何内容发生变化，则会重新渲染整个组件，但请记住，React会跟踪VDOM中的变化，因此速度非常快。

此外，你的App.js只是Router组件，所以说它"；重新呈现整个应用程序"；是夸大其词。它只会重新渲染当前显示的组件。

最后，但并非最不重要的是，看看shouldComponentUpdate函数，因为它可能会为您节省一些re-renders(例如，当您不需要从API获取时(。