React 时间切片理解分析

import React, { useState } from 'react';
import { unstable_scheduleCallback } from 'scheduler';
// 设置任务的优先级
const PRIORITY = {
  IMMEDIATE: 1,
  USER_BLOCKING: 2,
  NORMAL: 3,
  LOW: 4,
};
function App() {
  const [ count, setCount ] = useState(0);
  // 定义一个时间片任务
  const sliceTask = ({ priority = PRIORITY.NORMAL, onStart, onEnd }) => {
    unstable_scheduleCallback(priority, () => {
      if (onStart) {
        onStart();
      }
      const result = runAsyncTask();
      if (onEnd) {
        onEnd(result);
      }
    });
  }
  // 模拟一个异步任务
  const runAsyncTask = async () => {
    console.log('start task');
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log('end task');
    return 'done';
  };
  // 处理用户输入
  const handleClick = () => {
    setCount(count + 1);
    // 启动时间切片任务
    sliceTask({
      priority: PRIORITY.IMMEDIATE,
      onStart: () => console.log('task started'),
      onEnd: result => console.log(`task finished with result ${result}`),
    });
  };
  return (
    <div>
      <p>Count: {count}</p >
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}
export default App;