React Fiber 架构与并发模式

// Fiber 节点结构示意
const fiber = {
  type: 'div',           // 元素类型
  key: null,             // 列表 key
  props: {               // 属性
    className: 'container',
    children: []
  },
  stateNode: null,       // DOM 节点或组件实例
  
  // Fiber 树结构
  return: parentFiber,   // 父节点
  child: firstChildFiber, // 第一个子节点
  sibling: nextFiber,    // 下一个兄弟节点
  
  // 状态和副作用
  memoizedState: null,   // Hooks 链表
  memoizedProps: null,   // 上一次的 props
  pendingProps: props,   // 新的 props
  effectTag: 0,          // 副作用标记（Placement, Update, Deletion 等）
  flags: 0,              // 新版 React 使用 flags
  lanes: 0,              // 优先级标记
};

// useTransition 使用示例
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();
  
  const handleSearch = (e) => {
    const value = e.target.value;
    
    // 立即更新输入框（高优先级）
    setQuery(value);
    
    // 将搜索结果更新标记为低优先级
    startTransition(() => {
      const filtered = largeDataList.filter(item => 
        item.name.toLowerCase().includes(value.toLowerCase())
      );
      setResults(filtered);
    });
  };
  
  return (
    <div>
      <input 
        type="text" 
        value={query} 
        onChange={handleSearch}
        placeholder="Search..."
      />
      {isPending && <span>Searching...</span>}
      <ResultList results={results} />
    </div>
  );
}

// useDeferredValue 使用示例
function DeferredList({ query }) {
  const deferredQuery = useDeferredValue(query);
  
  const results = useMemo(() => {
    return largeDataList.filter(item =>
      item.name.toLowerCase().includes(deferredQuery.toLowerCase())
    );
  }, [deferredQuery]);
  
  return (
    <div>
      {results.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

// Suspense 数据获取示例
function ProfilePage() {
  return (
    <Suspense fallback={<Loading />}>
      <ProfileDetails />
      <Suspense fallback={<PhotosSkeleton />}>
        <ProfilePhotos />
      </Suspense>
    </Suspense>
  );
}

// 使用 Suspense 的数据获取
function fetchProfileData(id) {
  let status = 'pending';
  let result;
  let suspender = fetchUser(id).then(
    (data) => {
      status = 'success';
      result = data;
    },
    (error) => {
      status = 'error';
      result = error;
    }
  );
  
  return {
    read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    }
  };
}

// Concurrent Feature 配置
const root = ReactDOM.createRoot(document.getElementById('root'), {
  // 启用并发特性
  concurrent: true,
});

// 自动批处理示例
function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  
  // React 18 自动批处理这些更新
  const handleReset = () => {
    setFirstName('');
    setLastName('');
  };
  
  // 即使在异步操作中也会自动批处理
  const handleAsyncReset = async () => {
    await fetchData();
    setFirstName('');
    setLastName('');
    // 只会触发一次重新渲染
  };
  
  return (
    <form>
      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
      <input value={lastName} onChange={e => setLastName(e.target.value)} />
      <button type="button" onClick={handleReset}>Reset</button>
    </form>
  );
}