在选项卡之间切换时避免在React中重新渲染
基兰·莫汉（Kiran Mohan）
我有一个使用material-ui创建选项卡的React应用程序。
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange}>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
</AppBar>
{value === 0 && <TabContainer id={1}>Item One</TabContainer>}
{value === 1 && <TabContainer id={2}>Item Two</TabContainer>}
{value === 2 && <TabContainer id={3}>Item Three</TabContainer>}
</div>
TabContainer是一个功能组件，需要进行大量的计算。
在选项卡之间切换时，是否可以防止TabContainer重新呈现？
更新：
检查我的答案以获取具有React功能组件和CSS类的解决方案。
拉胡尔·贾恩（Rahul Jain）
为了防止TabContainer重新呈现。你必须
- 一次渲染所有TabContainer数据，而不是根据值进行渲染。
- 您必须使用CSS并仅显示当前处于活动状态的选项卡。
- 另外，您可以将组件制作为PureComponent，也可以重写shouldComponentUpdate（）生命周期方法以停止对React组件进行额外的重新渲染。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在React Native Navigation中的选项卡之间切换时如何保持堆叠的屏幕
- 2
在片段TabHost中的选项卡之间切换
- 3
在TabBarView中的各个选项卡之间切换时跳过一个选项卡
- 4
jQuery ui选项卡：在选项卡之间切换时的滑动效果
- 5
在选项卡中的选项卡之间切换
- 6
在选项卡中的选项卡之间切换
- 7
通过单击选项卡（不滑动）在“滑动”选项卡之间切换时，应用程序崩溃
- 8
如何添加滑动以在选项卡之间切换
- 9
反应帮助选项卡之间切换
- 10
在模态角度选项卡之间切换
- 11
保留不同选项卡之间的切换
- 12
打开并在选项卡之间切换时，如何更新FirefoxDriver（WebDriver）对象？
- 13
在选项卡之间切换时，如何制作淡入淡出的动画？
- 14
打开并在选项卡之间切换时，如何更新FirefoxDriver（WebDriver）对象？
- 15
在崇高的“ ctrl + tab”中的选项卡之间切换
- 16
在Visual Studio中按文件类型排序选项卡窗口之间的快速切换
- 17
在Swift中以编程方式在选项卡之间切换
- 18
Android在选项卡中的多个片段之间切换
- 19
以编程方式在TabbedPage中的选项卡之间切换
- 20
在IntelliJ IDEA中的终端选项卡之间切换
- 21
使用键盘在gnome终端中的选项卡之间切换？
- 22
在Gedit中，是否可以使用热键在选项卡之间切换？
- 23
使用Ctrl-Tab在gnome-terminal中的选项卡之间切换
- 24
是否有热键可在Caja中的选项卡之间切换？
- 25
更改窗口大小并在导航选项卡之间切换时，数据表无法正确调整大小
- 26
Android：在选项卡之间切换时，ListView会烦人地滚动到顶部
- 27
Android：在选项卡之间切换时，ListView会烦人地滚动到顶部
- 28
选中或未选中时，如何使用复选框在选项卡之间切换？
- 29
使用 ViewPager 在选项卡之间切换时，RecyclerView 一次自动滚动一项
我来说两句