至于我的React经验到目前为止,我有两种方法可以隐藏一些基于props / state的React组件输出/渲染的渲染HTML:
>用一些条件逻辑围绕HTML / JSX,或者
>有条件地向该元素添加一个类,让CSS控制显示/可见性
我想知道哪种是最佳做法?我有一种预感,即使用CSS方法可以获得一些性能提升,因为浏览器不需要大量操作DOM.
或者,将元素从DOM中完全删除有时会很好.
任何见解?
最佳答案
从性能角度来看:智能反应最小化DOM重新呈现,包括特殊处理,如果您更改DOM中的项目列表(例如< li>项目).反应非常快.没有经过测试,但我认为性能上的任何差异都是微乎其微的.
如果有问题的组件是纯HTML,那么我通常在两种隐藏元素的方法之间应用以下经验法则:
>对于可以由用户多次打开和关闭的UI的组件(例如,下拉菜单,工具提示,弹出窗口等):使用CSS隐藏/显示,可能有条件地在反应中添加类.
>对于仅渲染和隐藏一次的组件(例如,从列表中删除项目,关闭一次性模式弹出窗口等):使用条件渲染.
注意:对于不仅仅包含HTML的组件,例如包含输入字段或按钮的组件,或反应组件,最好让反应从DOM中删除它们.让反应也很好地清理可能的事件监听器等.