/**
 *  打开performance查看Concurrent Mode下render阶段的时间切片
 * 点击一下按钮然后会开始BitList的render阶段，可以看到处于render阶段(也就是点击按钮后的前几秒)时input
 * 是可以输入的，但是由于要渲染的东西太多，到commit阶段时就会开始卡住，
 * 所以此时会卡顿的瓶颈在浏览器渲染太耗时，而不是在react
 */ import React , { useState } from '../packages/react' ; const data = Array . from ( { length : 50e4 } , ( _ , i ) => i ) ; const CHUNK_SIZE = 1e4 / 10 ; param param0 returns const Chunk = ( { start } ) : any => { const end = Math . min ( data . length , start + CHUNK_SIZE ) ; const children = Array . from ( { length : end - start } ) ; for ( let i = start ; i < end ; ++ i ) { children [ i - start ] = < div key = { i } > { i } < /div>; } return children ; } ; const BigList = ( ) => { const children = [ ] ; for ( let i = 0 ; i < data . length ; i += CHUNK_SIZE ) { children . push ( < Chunk start = { i } / > ) ; } return < div > { children } < /div>; } ; export const TimeSlicingDemo = ( ) => { const [ isShowBigList , setIsShowBigList ] = useState ( false ) ; return ( < div > < button onClick = { ( ) => { setTimeout ( ( ) => { setIsShowBigList ( ! isShowBigList ) ; } ) ; } } > toggle BigList < /button> < br / > < input placeholder = "输入点东西，看看交互有没有被阻塞" / > < br /> { isShowBigList ? < BigList /> : null} < /div>); } ;