卸载组件还是用CSS隐藏它更好？

Question

我的React Native应用程序中有一个标头组件，当用户键盘打开时，该标头组件会滑出屏幕。这样我可以创造更多空间。动画完成后，我可以卸载组件（使用Redux及其父组件），也可以通过应用flex: 0将其隐藏。

哪种方法更好？还是没有区别？

Answer 1

有两点要考虑：

• 您是否需要数据在隐藏/显示标题之间保持持久？
• 您是否需要隐藏屏幕阅读器的标题？

如果标头包含任何需要保留的状态，则优先使用css隐藏元素，而不要进行卸载。例如，假设您的标头的计数从0开始，并在用户在页面上的每一秒进行计数。如果在标题消失时卸载标题，计数将重新从0开始。如果使用CSS隐藏元素，则计数将在再次出现时保持不变。

如果在隐藏键盘的同时需要屏幕阅读器读取标题，请确保使用CSS将其隐藏。屏幕在隐藏时仍应拾取元素，但是在卸载时，它们将不可见，因为这些元素将从页面上有效移除。

如果您的项目中没有这些问题，则可以选择其中任何一个。

Answer 2

如果要使用动画，最好height: 0

或使用condition

this.state = {
  displayHeader : true
}

{this.state.displayHeader ? <YourTag >....</YourTag> : null}