javascript – 更好的做法是在React中有条件地渲染或有条件地添加一个类来隐藏元素

前端之家收集整理的这篇文章主要介绍了javascript – 更好的做法是在React中有条件地渲染或有条件地添加一个类来隐藏元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

至于我的React经验到目前为止,我有两种方法可以隐藏一些基于props / state的React组件输出/渲染的渲染HTML

>用一些条件逻辑围绕HTML / JSX,或者
>有条件地向该元素添加一个类,让CSS控制显示/可见性

我想知道哪种是最佳做法?我有一种预感,即使用CSS方法可以获得一些性能提升,因为浏览器不需要大量操作DOM.
或者,将元素从DOM中完全删除有时会很好.

任何见解?

最佳答案
性能角度来看:智能反应最小化DOM重新呈现,包括特殊处理,如果您更改DOM中的项目列表(例如< li>项目).反应非常快.没有经过测试,但我认为性能上的任何差异都是微乎其微的.

如果有问题的组件是纯HTML,那么我通常在两种隐藏元素的方法之间应用以下经验法则:

>对于可以由用户多次打开和关闭的UI的组件(例如,下拉菜单,工具提示,弹出窗口等):使用CSS隐藏/显示,可能有条件地在反应中添加类.
>对于仅渲染和隐藏一次的组件(例如,从列表中删除项目,关闭一次性模式弹出窗口等):使用条件渲染.

注意:对于不仅仅包含HTML的组件,例如包含输入字段或按钮的组件,或反应组件,最好让反应从DOM中删除它们.让反应也很好地清理可能的事件监听器等.

猜你在找的CSS相关文章