1

我正在尝试编写将大量组件逐步呈现到屏幕上的代码，我的理解是 react-fiber 应该有助于该过程。有没有办法测试它是否真的有帮助？

我想这样做的全部原因是让前一百行快速渲染，而最后一百行，比如说，2000 可以渲染得更慢，因为它们在页面加载时超出了用户的窗口

这不是我的实际代码，更多只是一个概念证明，但它仍然只是一次全部弹出，并且查看性能浏览器工具，它似乎也被同时渲染了。

https://do-react-fibers-do-anything.glitch.me/

class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 0,
      items: [],
    }
  }
  render() {
    return (
      <div>
        count { this.state.count }
        <button onClick={() => {
            this.setState({
              count: this.state.count+1,
              items: items(),
            })
          }}>do it</button>
        {
          this.state.items.map(
            function(item) {
              const turns = item / 10
              const style = {
                backgroundColor: `hsl(${turns}turn, 50%, 50%)`, 
              }
              if (Math.floor(item) % 2) {
                return <span style={style}></span>
              } else {
                return <code style={style}></code>
              }
            }
          )
        }
      </div>
    )
  }
}

function items() {
  const items = []
  performance.mark('start calculating items')
  for (let index = 0; index < 10000; index++) {
    items.push(Math.random()*10)
  }
  performance.mark('done calculating items')
  performance.measure('calculating random items', 'start calculating items', 'done calculating items')
  return items
}

如果这有意义的话，我希望它以更分段的方式呈现。我是在尝试错误地测试/可视化它还是发生了其他事情？谢谢

4

0 回答 0