Firbe 架构

3. 优先级调度

// 不同优先级的更新
import {
    unstable_runWithPriority,
    unstable_NormalPriority,
    unstable_UserBlockingPriority,
} from "scheduler";

// 用户交互（高优先级）
function handleClick() {
    unstable_runWithPriority(unstable_UserBlockingPriority, () => {
        setState(newState);
    });
}

// 数据加载（低优先级）
function loadData() {
    unstable_runWithPriority(unstable_NormalPriority, () => {
        setState(newState);
    });
}

Fiber 的性能优化

时间切片（Time Slicing）

// 长列表渲染优化
function LongList() {
  const items = useMemo(() => /* 大量数据 */, []);

  return (
    <div>
      {items.map(item => (
        // 每个 Item 的渲染可能会被中断
        <ListItem key={item.id} item={item} />
      ))}
    </div>
  );
}

过渡更新（Transitions）

import { startTransition, useTransition } from "react";

// 标记非紧急更新
function App() {
    const [isPending, startTransition] = useTransition();
    const [tab, setTab] = useState("home");

    function selectTab(nextTab) {
        startTransition(() => {
            setTab(nextTab); // 非紧急更新
        });
    }

    return (
        <>
            {isPending && <Spinner />}
            <TabButton onClick={() => selectTab("home")}>Home</TabButton>
            <TabButton onClick={() => selectTab("about")}>About</TabButton>
            <TabContent tab={tab} />
        </>
    );
}

错误边界（Error Boundaries）

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        // 记录错误
        logErrorToService(error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return <FallbackUI />;
        }

        return this.props.children;
    }
}

// 使用
<ErrorBoundary>
    <MyComponent />
</ErrorBoundary>;

Fiber 调试工具

// 1. React DevTools 中的 Fiber 树
// 2. 性能分析
import { unstable_trace as trace } from "scheduler/tracing";

trace("my event", performance.now(), () => {
    // 更新操作
});

// 3. 使用 Profiler API
<Profiler id="App" onRender={onRenderCallback}>
    <App />
</Profiler>;

实际应用示例

// 优化大型应用渲染
function OptimizedApp() {
    const [input, setInput] = useState("");
    const [results, setResults] = useState([]);

    // 用户输入：紧急更新
    const handleInputChange = e => {
        setInput(e.target.value); // 同步更新

        // 搜索：非紧急更新
        startTransition(() => {
            const newResults = performSearch(e.target.value);
            setResults(newResults);
        });
    };

    return (
        <div>
            <input value={input} onChange={handleInputChange} />
            <Suspense fallback={<Loading />}>
                <SearchResults results={results} />
            </Suspense>
        </div>
    );
}