fix concurrent mode dosen't work

neroneroffy · Jul 22, 2020 · 7e6c9f9 · 7e6c9f9
1 parent 0635df7
commit 7e6c9f9
Show file tree

Hide file tree

Showing 12 changed files with 98 additions and 85 deletions.
diff --git a/public/index.html b/public/index.html
@@ -9,35 +9,11 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/src/App.css b/src/App.css
@@ -3,38 +3,3 @@
   width: 1000px;
   margin: 0 auto;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/index.js b/src/index.js
@@ -3,14 +3,12 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-/*ReactDOM.createRoot(
-  document.getElementById('root')
-).render(<App />);*/
+const root = document.getElementById('root')
+
+// Concurrent mode
+ReactDOM.createRoot(root).render(<App />);
+
+// Sync mode
+// ReactDOM.render(<App />, root);
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
 console.log('React 源码调试，当前版本：' + React.version);
diff --git a/src/react/v16.12.0/scheduler/src/Scheduler.js b/src/react/v16.12.0/scheduler/src/Scheduler.js
@@ -440,4 +440,25 @@ export const unstable_Profiling = enableProfiling
       sharedProfilingBuffer,
     }
   : null;
-export * from './forks/SchedulerHostConfig.mock';
+
+export {
+  unstable_flushAllWithoutAsserting,
+  unstable_flushNumberOfYields,
+  unstable_flushExpired,
+  unstable_clearYields,
+  unstable_flushUntilNextPaint,
+  unstable_flushAll,
+  unstable_yieldValue,
+  unstable_advanceTime
+} from "./forks/SchedulerHostConfig.mock.js";
+
+export {
+  requestHostCallback,
+  requestHostTimeout,
+  cancelHostTimeout,
+  shouldYieldToHost,
+  getCurrentTime,
+  forceFrameRate,
+  requestPaint
+} from "./forks/SchedulerHostConfig.default.js";
+
diff --git a/src/react/v16.12.0/scheduler/src/SchedulerHostConfig.js b/src/react/v16.12.0/scheduler/src/SchedulerHostConfig.js
@@ -6,6 +6,26 @@
  *
  * @flow
  */
-export * from './forks/SchedulerHostConfig.mock';
+export {
+  unstable_flushAllWithoutAsserting,
+  unstable_flushNumberOfYields,
+  unstable_flushExpired,
+  unstable_clearYields,
+  unstable_flushUntilNextPaint,
+  unstable_flushAll,
+  unstable_yieldValue,
+  unstable_advanceTime
+} from "./forks/SchedulerHostConfig.mock.js";
+
+export {
+  requestHostCallback,
+  requestHostTimeout,
+  cancelHostTimeout,
+  shouldYieldToHost,
+  getCurrentTime,
+  forceFrameRate,
+  requestPaint
+} from "./forks/SchedulerHostConfig.default.js";
+
 
 // throw new Error('This module must be shimmed by a specific build.');
diff --git a/src/react/v16.13.1/react-reconciler/src/ReactFiberWorkLoop.new.js b/src/react/v16.13.1/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -475,6 +475,7 @@ export function scheduleUpdateOnFiber(
   // priority as an argument to that function and this one.
   const priorityLevel = getCurrentPriorityLevel();
   // 获取到当前的优先级
+  console.log(lane);
   if (lane === SyncLane) {
     if (
       // Check if we're inside unbatchedUpdates
@@ -1009,14 +1010,15 @@ function markRootSuspended(root, suspendedLanes) {
 
 // This is the entry point for synchronous tasks that don't go through Scheduler
 // 这是不经过Scheduler的同步任务的入口点
+
 function performSyncWorkOnRoot(root) {
   invariant(
     (executionContext & (RenderContext | CommitContext)) === NoContext,
     'Should not already be working.',
   );
-
+  // 刷新被动的副作用
   flushPassiveEffects();
-
+  console.log('root', root);
   let lanes;
   let exitStatus; // 声明一个状态，来保存render阶段完成时的状态，对某些错误做特定处理
   if (
@@ -1563,6 +1565,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 /** @noinline */
 function workLoopSync() {
   // Already timed out, so perform work without checking if we need to yield.
+  // 已经超时了，所以不用检查是否需要让出执行权
   while (workInProgress !== null) {
     performUnitOfWork(workInProgress);
   }
@@ -1599,16 +1602,20 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
   executionContext = prevExecutionContext;
 
   // Check if the tree has completed.
+  // 判断渲染是否结束
   if (workInProgress !== null) {
     // Still work remaining.
     return RootIncomplete;
   } else {
     // Completed the tree.
     // Set this to null to indicate there's no in-progress render.
+    // 完成渲染之后，将workInProgressRoot 和 workInProgressRoot上正在渲染的lanes置为空，
+    // 表示渲染已经结束
     workInProgressRoot = null;
     workInProgressRootRenderLanes = NoLanes;
 
     // Return the final exit status.
+    // 返回最终的结束状态
     return workInProgressRootExitStatus;
   }
 }

diff --git a/src/react/v16.13.1/scheduler/src/Scheduler.js b/src/react/v16.13.1/scheduler/src/Scheduler.js
@@ -444,4 +444,23 @@ export const unstable_Profiling = enableProfiling
       sharedProfilingBuffer,
     }
   : null;
-export * from './forks/SchedulerHostConfig.mock';
+export {
+  unstable_flushAllWithoutAsserting,
+  unstable_flushNumberOfYields,
+  unstable_flushExpired,
+  unstable_clearYields,
+  unstable_flushUntilNextPaint,
+  unstable_flushAll,
+  unstable_yieldValue,
+  unstable_advanceTime
+} from "./forks/SchedulerHostConfig.mock.js";
+
+export {
+  requestHostCallback,
+  requestHostTimeout,
+  cancelHostTimeout,
+  shouldYieldToHost,
+  getCurrentTime,
+  forceFrameRate,
+  requestPaint
+} from "./forks/SchedulerHostConfig.default.js";
diff --git a/src/react/v16.13.1/scheduler/src/SchedulerHostConfig.js b/src/react/v16.13.1/scheduler/src/SchedulerHostConfig.js
@@ -6,6 +6,24 @@
  *
  * @flow
  */
-export * from './forks/SchedulerHostConfig.mock';
+export {
+  unstable_flushAllWithoutAsserting,
+  unstable_flushNumberOfYields,
+  unstable_flushExpired,
+  unstable_clearYields,
+  unstable_flushUntilNextPaint,
+  unstable_flushAll,
+  unstable_yieldValue,
+  unstable_advanceTime
+} from "./forks/SchedulerHostConfig.mock.js";
 
+export {
+  requestHostCallback,
+  requestHostTimeout,
+  cancelHostTimeout,
+  shouldYieldToHost,
+  getCurrentTime,
+  forceFrameRate,
+  requestPaint
+} from "./forks/SchedulerHostConfig.default.js";
 // throw new Error('This module must be shimmed by a specific build.');
diff --git a/src/react/v16.13.1/scheduler/src/forks/SchedulerHostConfig.default.js b/src/react/v16.13.1/scheduler/src/forks/SchedulerHostConfig.default.js
@@ -45,7 +45,6 @@ if (
     return Date.now() - initialTime;
   };
   requestHostCallback = function(cb) {
-    console.log(123);
     if (_callback !== null) {
       // Protect against re-entrancy.
       setTimeout(requestHostCallback, 0, cb);