Question

我正在尝试编写将许多组件逐步呈现到屏幕上的代码，我的理解是，反应纤维应该可以帮助完成该过程。有没有一种方法可以测试并查看它是否实际上在做任何帮助？

我要这样做的全部原因是使前一百行快速渲染，而使最后一行（例如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
}

如果可以的话，我希望它能以更分段的方式呈现。上午我试图去测试/可视化这一不正确或别的事情吗？谢谢

如何测试，看看是否发生反应，纤维被正常

0 个答案: