V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

如果想在 V2EX 获得更好的推广效果，欢迎了解 PRO 会员机制：
https://www.v2ex.com/pro/about

This topic created in 1858 days ago, the information mentioned may be changed or developed.

当你需要加载很多东西，并想知道整体的加载状态时，可以使用

ease-progress

react progress 原始组件, 提供便捷的 progress 统计信息

import { ProgressProvider, RawProgressContext } from "ease-progress"

function App() {
  const { loaded, total, setProgressState } = useContext(RawProgressContext)

  return <>
    {
      LargeAssetList.map((url) => <SomeComponent
        key={url}
        onProgress={(e) => {
          setProgressState({
            [url]: {
              loaded: e.loaded,
              total: e.total,
            },
          })
        }}
      />)
    }

    <p>loaded: {loaded}</p>
    <p>total: {total}</p>
  </>
}

ReactDOM.render(
  <ProgressProvider>
    <App />
  </ProgressProvider>,
  document.querySelector("#app"),
)

No Comments Yet

loaded total progress URL

一个 react progress 组件

ease-progress