javascript - react : Avoiding Re-rendering Same Component on Routing

Question

我有一个包含 10 个图表的屏幕(使用 recharts.org)——单击图表时我想将路线从 http://localhost:3000/charts 切换到至 http://localhost:3000/charts/first并且只需全屏显示第一个图表，但不会重新渲染它，因为任何数据都不会改变。

关于如何实现这一目标有什么建议吗？

Answer 1

做到这一点的唯一方法(至少在我以前的经验中)是将图表与路线放在同一级别(带有一些条件......)，如果您不需要它在顶部，您可以更改路线位置...问题是，它并没有为 grid/flex 提供太大的灵 active ，但它可以工作:P(在我的情况下，我选择的图表始终位于顶部，因此它非常适合，您可以尝试一些条件基于位置的样式，但我担心它会重新渲染)

<Route  path="/charts" >
 {history.pathname === '/charts/first' && <Chart data ..../>}
 {history.pathname === '/charts/second' && <Chart data ..../>}
 <Route  path="/charts/first" >
  <h1> Up you have the unRendered graph </h1>
</Route>
</Route>

*

Chart is a wrapper of any rechart graph(bar, pie ...) and has the REACT MEMO IMPLEMENTED

*

我花了几天时间来解决这个问题，如果您需要更多帮助，请在此处发表评论