javascript - 比较用css隐藏React组件和状态管理的性能

Question

如果我有一个 React 组件并且我想隐藏它。目前，我采用两种方法:

状态管理方式

render() {
    return (
        <div>
            { this.state.showComponent && <Component/> }
        </div>
    );
}

CSS 方式:

render() {
    return (
        <div>
            <Component className="hide-with-CSS"/>
        </div>
    );
}    

我假设前一种方式将根据当前状态删除/添加组件，而后一种方式只是“隐藏”它。所以我的问题是:

• 哪种方法会产生更好的性能？
• 是否有另一种有效隐藏元素的方法？

Answer 1

CSS 解决方案在显示和隐藏之间切换会更快。

但是，如果 this.state.showComponent 最初是 false，那么非 CSS 方式会避免最初安装 Component，所以初始渲染会更快。

此外，当 this.state.showComponent 为 false 时，父组件将更能响应其他事件，因为它要渲染/重新渲染的组件少了一个(当父级重新渲染时，Component 也会被重新渲染，即使它的 props 没有改变，除非它被声明为纯的或实现的 shouldComponentUpdate)。

非 CSS 方法也更简单，因为它不涉及 CSS(而 CSS 方法也需要状态管理来切换类名)。

因此我推荐非 CSS 方法。