Javascript React渲染时间太长-我应该选择哪种体系结构？

我的问题：我正在尝试使用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>
  );
}

导出默认函数App（）{
const[date，setDate]=useState（0）；
返回(

//这是一个简化的日历：我可以选择3天，并获得当前选择日期的信息

2020


2021


2022


当前日期：{date}


);
}

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);
}

导出默认功能组织（props）{
设{day}=useParams（）；
如果（天===未定义）{
日期=2020年；
}
返回(
OnSlideChange（swiper，props.setDate）}
>
);
}
滑动更改功能（swiper、setDate）{
window.history.pushState（null，“新页面标题”、“/organization/”+swiper.slides[swiper.activeIndex].attributes.daynb.value）；
setDate（swiper.slides[swiper.activeIndex].attributes.daynb.value）；
}

代码可以在这里找到

---

非常感谢

这就是React的工作方式-如果组件中有任何更改，请重新渲染整个组件，但请记住React跟踪VDOM中的更改，因此速度非常快

另外，你的

App.js

只是一个

Router

组件，所以说它“重新呈现整个应用”是夸大其词。它仅重新渲染当前显示的组件

---

最后，但并非最不重要的一点是，看看

shouldComponentUpdate

函数，因为它可以为您节省一些重新渲染（例如，当您不需要从API获取时）。

阅读React中的备忘录，我认为它可以解决您的性能问题。谢谢。备忘录将不起作用，因为在每个页面中，我都会从API获取数据，这样即使道具没有改变，数据也会改变。。。这不是更好的解决方案吗？谢谢。现在我知道我的逻辑和反应逻辑是一致的。事实上，我不应该害怕拥有太多的东西。