{"id":426584,"date":"2021-04-08T14:02:25","date_gmt":"2021-04-08T06:02:25","guid":{"rendered":"http:\/\/4563.org\/?p=426584"},"modified":"2021-04-08T14:02:25","modified_gmt":"2021-04-08T06:02:25","slug":"%e4%b8%80%e4%b8%aa-react-progress-%e7%bb%84%e4%bb%b6","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=426584","title":{"rendered":"\u4e00\u4e2a react progress \u7ec4\u4ef6"},"content":{"rendered":"<div>\n<div>\n<div>\n<h1>                  \u4e00\u4e2a react progress \u7ec4\u4ef6               <\/h1>\n<p> <\/p>\n<div>\n<div> <span>\u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <span><i><\/i> 3<\/span> <\/div>\n<div> <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div isfirst=\"1\"> <\/p>\n<p>\u5f53\u4f60\u9700\u8981\u52a0\u8f7d\u5f88\u591a\u4e1c\u897f\uff0c\u5e76\u60f3\u77e5\u9053\u6574\u4f53\u7684\u52a0\u8f7d\u72b6\u6001\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528<\/p>\n<h1>ease-progress<\/h1>\n<p> <\/p>\n<p>react progress \u539f\u59cb\u7ec4\u4ef6, \u63d0\u4f9b\u4fbf\u6377\u7684 progress \u7edf\u8ba1\u4fe1\u606f<\/p>\n<pre><code>import { ProgressProvider, RawProgressContext } from \"ease-progress\"  function App() {   const { loaded, total, setProgressState } = useContext(RawProgressContext)    return &lt;&gt;     {       LargeAssetList.map((url) =&gt; &lt;SomeComponent         key={url}         onProgress={(e) =&gt; {           setProgressState({             [url]: {               loaded: e.loaded,               total: e.total,             },           })         }}       \/&gt;)     }      &lt;p&gt;loaded: {loaded}&lt;\/p&gt;     &lt;p&gt;total: {total}&lt;\/p&gt;   &lt;\/&gt; }  ReactDOM.render(   &lt;ProgressProvider&gt;     &lt;App \/&gt;   &lt;\/ProgressProvider&gt;,   document.querySelector(\"#app\"), ) <\/code><\/pre>\n<\/p><\/div>\n<div> <b>\u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (<span>0<\/span>)        <\/div>\n<div> <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<ul>\n<li>\n","protected":false},"excerpt":{"rendered":"<p>\u4e00\u4e2a react progress&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/426584"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=426584"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/426584\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=426584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=426584"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=426584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}