gpt4 book ai didi

reactjs - react 延迟渲染

转载 作者:行者123 更新时间:2023-12-02 06:55:09 26 4
gpt4 key购买 nike

假设我有一个用 React 编写的选项卡控件组件。仅呈现事件选项卡以获得更好的性能(如果我呈现所有选项卡,将需要 5 秒,因为大约有 20 个选项卡,每个都包含大量数据)。当我单击它们以激活它们时,将呈现其他选项卡。

除了一个选项卡外,这非常有效。特殊选项卡比其他选项卡大得多,它包含一个有 2000 行的表,因此 React 需要 3 秒来渲染它。这使得用户体验非常糟糕:你点击选项卡,3 秒内没有任何 react ,因为 React 正在忙于渲染,然后突然出现大表。

如果没有 React,我通常会这样做:

  • 在新的事件标签中放置一些加载指示器
  • 切换到新的事件标签
  • setTimeout(render(), 50);

  • 由于实际渲染发生在 50 毫秒之后,浏览器有足够的时间来更新 UI。用户点击后会立即看到新的事件标签,并且新的事件标签中有一个加载指示器,现在等待 3 秒更容易接受。

    在 React 中,render() 方法由 React 框架调用,是否可以执行类似于步骤 3 的操作?

    我知道我可以用分页表替换大表,因此只会同时呈现有限数量的行。但我的问题集中在处理需要大量时间来呈现的 UI 组件。

    最佳答案

    是的,您可以通过提供组件状态来实现类似的功能。

    添加 getInitialState( return { loading: true });到您的组件
    根据状态更改渲染方法,例如喜欢

    if (this.state.loading) {
    return (
    <div className='my-nice-tab-container'>
    <div className='loading-state'>Loading...</div>
    </div>)
    } else {
    return (
    <div className='my-nice-tab-container'>
    <div className='full tab contents'>
    {myHugeArray.map(item => ( return
    <Item class='one-of-list-of-2000' />
    ))}
    </div>
    </div>)
    }

    并添加 componentDidMount()到您的组件,例如:
    componentDidMount() {
    var self = this;
    setTimeout(() => {
    self.setState({loading: false}); }, 50);
    }

    然后你的组件应该首先以加载状态呈现,并在 50 毫秒后加载整个内容。

    关于reactjs - react 延迟渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33097064/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com