// 偽代碼演示同步渲染的問題
function updateUI() {
  // 開始渲染,必須一口氣完成
  for(let i = 0; i < 1000; i++) {
    renderProduct(i);  // 每個商品都要處理
  }
  // 完成前用戶輸入被阻塞!
}

// Fiber節(jié)點的簡化結(jié)構(gòu)(實際更復(fù)雜)
const fiberNode = {
type: 'div',              // 節(jié)點類型
stateNode: domElement,    // 對應(yīng)的真實DOM

// 樹形結(jié)構(gòu)的鏈接
return: parentFiber,      // 父節(jié)點
child: firstChildFiber,   // 第一個子節(jié)點  
sibling: nextSiblingFiber,// 兄弟節(jié)點

// diff相關(guān)
alternate: oldFiber,      // 指向上一次的Fiber,用于對比
effectTag: 'UPDATE',      // 標記這個節(jié)點要做什么操作

// 調(diào)度相關(guān)
expirationTime: 1234,     // 過期時間,用于優(yōu)先級
}

// React的工作循環(huán)(簡化版)
function workLoop(deadline) {
// 只要還有剩余時間,就繼續(xù)干活
while (nextUnitOfWork && deadline.timeRemaining() > 0) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }

// 沒時間了?下次再說
if (nextUnitOfWork) {
    requestIdleCallback(workLoop);  // 瀏覽器空閑時繼續(xù)
  }
}

// React內(nèi)部的優(yōu)先級(簡化)
const ImmediatePriority = 1;   // 立即執(zhí)行,如用戶輸入
const UserBlockingPriority = 2;// 用戶交互,如點擊
const NormalPriority = 3;      // 常規(guī)更新,如網(wǎng)絡(luò)請求結(jié)果
const LowPriority = 4;         // 低優(yōu)先級,如分析統(tǒng)計
const IdlePriority = 5;        // 空閑時才做,如日志

// 用法示例
function MyComponent() {
const [inputValue, setInputValue] = useState('');
const [searchResults, setSearchResults] = useState([]);

const handleInput = (e) => {
    // 立即更新輸入框 - 高優(yōu)先級
    setInputValue(e.target.value);
    
    // 搜索結(jié)果延后更新 - 低優(yōu)先級
    startTransition(() => {
      const results = expensiveSearch(e.target.value);
      setSearchResults(results);
    });
  };

return (
    <input onChange={handleInput} value={inputValue} />
    {/* 大量結(jié)果列表 */}
  );
}

// 不好的做法
function ProductList({ products }) {
return products.map(p =><ProductCard key={p.id} {...p} />);
// 1萬個商品 = 1萬個Fiber節(jié)點要計算
}

// 利用Fiber的做法
function ProductList({ products }) {
// 虛擬滾動,只渲染可見部分
const visibleProducts = useVirtualScroll(products);
return visibleProducts.map(p =><ProductCard key={p.id} {...p} />);
// 只有50個Fiber節(jié)點,其他延遲加載
}

// 利用React 18的并發(fā)特性(基于Fiber)
function Dashboard() {
const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => {
      // 標記為低優(yōu)先級更新
      startTransition(() => {
        setData(result);
      });
    });
  }, []);

return<HeavyChart data={data} />;
// 圖表渲染不會阻塞其他交互
}