React 一些比较简单的问题

写在前面

个人感觉这些问题，比较简单，不涉及到源码和 React 渲染流程，对于 React 初学者而言，同样也能说出一二来。

什么是受控组件，什么是非受控组件？

React 类组件和函数式组件的区别

---

React 并发模式(Concurrent Mode)详解

什么是React并发模式？

React并发模式是React 18引入的一个重要特性，它允许React准备多个版本的UI，并且可以中断、暂停、恢复渲染过程，而不会阻塞主线程。

与传统同步渲染的区别

渲染机制不同

传统同步渲染：

• 一旦开始渲染就不可中断，必须一次性完成
• 大型组件树会导致长时间阻塞主线程
• 用户交互会有明显卡顿

并发模式：

• 渲染过程可中断、可恢复
• 优先级调度，高优先级任务可以中断低优先级任务
• 不会长时间阻塞主线程，保持页面响应性

关键API

自动批处理 (Automatic Batching)

// React 17: 只有在React事件中才会批处理
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f); // 不会批处理，两次重新渲染
}, 0);

// React 18并发模式: 所有更新都会自动批处理
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f); // 批处理，一次重新渲染
}, 0);

Transition API

import { startTransition } from 'react';

// 紧急更新：立即响应
setInputValue(input);

// 非紧急更新：可以延迟
startTransition(() => {
  setSearchQuery(input);
});

useDeferredValue

// 使用 useDeferredValue 延迟非关键更新
function BigList({ items }) {
  const [filter, setFilter] = useState('');
  const deferredFilter = useDeferredValue(filter);
  
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(deferredFilter));
  }, [items, deferredFilter]);
  
  return (
    <div>
      <input onChange={e => setFilter(e.target.value)} />
      <List items={filteredItems} />
    </div>
  );
}

调度器(Scheduler)的工作原理

什么是调度器

调度器就像是React的"大脑"，负责决定什么时候做什么事。它知道哪些更新比较重要，需要立即处理，哪些不那么急，可以等一等。

时间分片技术

调度器用了时间分片的技术，把大的任务拆成小块，分批次处理，给浏览器喘息的机会：

// 调度器的时间分片
function 时间分片处理() {
  const startTime = performance.now();
  const timeLimit = 5; // 每次只处理5ms
  
  while (还有任务 && (performance.now() - startTime < timeLimit)) {
    处理一个任务();
  }
  
  if (还有任务) {
    // 下个浏览器空闲时间再继续
    scheduleCallback(继续处理);
  }
}

优先级车道系统

React 18引入了"优先级车道"的概念，类似高速公路有快车道、慢车道：

const 优先级车道 = {
  用户交互: '🚗 超车道',    // 点击、输入 - SyncLane
  网络请求: '🚙 快车道',    // API返回数据 - InputContinuousLane
  状态更新: '🚌 普通车道',  // 一般状态更新 - DefaultLane
  后台任务: '🚚 慢车道'     // 统计、日志等 - IdleLane
};

实际应用场景

1. 搜索框优化

function SearchBox() {
  const [input, setInput] = useState('');
  const [results, setResults] = useState([]);
  
  const handleChange = (e) => {
    // 紧急更新：立即显示用户输入
    setInput(e.target.value);
    
    // 非紧急更新：搜索结果可以延迟
    startTransition(() => {
      const filteredResults = filterResults(e.target.value);
      setResults(filteredResults);
    });
  };
}

2. 防止渲染卡顿

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  const fetchUser = async (userId) => {
    // React 18自动批处理，避免中间状态
    setLoading(true);
    setUser(null);
    
    try {
      const response = await fetch(`/api/users/${userId}`);
      const userData = await response.json();
      setUser(userData);
      setLoading(false);
    } catch (error) {
      setLoading(false);
    }
  };
}

开启并发模式

// React 18
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />); // 自动启用并发模式

面试回答要点

1. 核心理解： 并发模式让React渲染过程可中断，提升用户体验
2. 主要区别： 同步渲染不可中断，并发模式可中断且有优先级
3. 关键特性： 自动批处理、Transition API、useDeferredValue
4. 调度器作用： 时间分片、优先级调度、防止主线程阻塞
5. 实际价值： 解决大组件树渲染卡顿，优化用户交互体验

口语化总结

"React 18的并发模式就像给React装了个智能调度器，知道什么时候该做什么事。重要的用户交互立即处理，不太重要的更新就等一等。这样既保证了用户体验流畅，又不会让浏览器卡死。"