ReactJS

Question

场景

我正在处理一个 ReactJS 项目，该项目在页面上有很多重复使用的组件，太多的组件导致某些 css 动画变得缓慢。我发现如果我在折叠页面下方的组件上使用 display:none，我的性能瓶颈就会消失。

问题

是否有当前的库，或者有一个非常简单的方法来完成这个？最坏的情况我会为此编写一个库并将其放在 github.

注意事项

使用 display:none 为元素提供 0 宽度/高度，因此我需要使用假定大小的占位符。
我会 "unrender" 可见组件，一旦它们离开可见 window 区域
延迟加载库并没有像我希望的那样成功，LazyLoadJS 是最有前途的，如果我最终需要编写自己的解决方案，我会利用它

Answer 1

我的情况比较独特，但我会尽可能将其分解为相关部分：

我的应用程序是 ReactJS SPA 或单页应用程序（很多 xhr，异步加载）
在整个生命周期中使用相同的滚动区域(.content-group)

CMS 中的

Json 包括组件名称和相应的数据。我的“SomeFactory”（非真名）获取映射的组件名称并将组件渲染到工厂容器。

一些注意事项：

forceCheck 是它起作用的原因，它重新评估滚动容器中惰性项目的位置
overflow 很有帮助，因为我使用 overflow: hidden 作为该元素祖先的一部分。

代码

import LazyLoad, { forceCheck } from 'react-lazyload';

class LazyLoadOptimized extends React.Component {
    render() {
        return (
            <LazyLoad throttle={50} height={200} offset={400} overflow scrollContainer={'.content-group'}>
                {this.props.children}
            </LazyLoad>
        )
    }
}

export default class SomeFactory extends Component {
    componentDidUpdate() {
        forceCheck();
    }
}

ReactJS - 在组件高于页面折叠之前不呈现（在可见 window 区域内）

ReactJS - Do not render until component is above page fold (within visible window area)

javascript

lazy-loading