⚛️ 框架技术 - REACT

What advantages does React 18 have over traditional DOM manipulation?

考察点：React价值理解。

答案：

React 18 相比传统DOM操作提供了声明式编程范式和高效的渲染机制。传统DOM操作需要手动管理元素的创建、更新和销毁，而React通过虚拟DOM和Fiber架构实现了自动化的DOM管理，让开发者专注于描述UI应该是什么样子，而非如何操作DOM。

主要优势：

1. 虚拟DOM优化：React使用虚拟DOM进行diff算法比较，只更新实际发生变化的DOM节点
2. 声明式编程：通过JSX描述UI结构，代码更直观易维护
3. 组件化开发：将复杂UI拆分成可复用的组件，提高开发效率
4. 并发特性：React 18引入了并发渲染，可中断和恢复渲染过程
5. 自动批处理：多个状态更新会自动合并，减少不必要的重渲染

代码示例：

// 传统DOM操作
const button = document.createElement('button');
button.textContent = count;
button.addEventListener('click', () => {
    count++;
    button.textContent = count;
});

// React 18方式
function Counter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

适用场景：

• 构建复杂的单页应用(SPA)
• 需要频繁DOM更新的交互式界面
• 大型团队协作的前端项目
• 对性能和用户体验要求较高的应用

How does event handling in JSX differ from native HTML events?

考察点：JSX事件机制。

答案：

JSX中的事件处理基于React的合成事件(SyntheticEvent)系统，它是对原生DOM事件的封装和统一。合成事件提供了跨浏览器的一致性接口，同时保持了与原生事件相同的API，但在事件委托、性能优化和开发体验方面有显著改进。

主要区别：

1. 事件命名：JSX使用驼峰命名法(onClick)，HTML使用小写(onclick)
2. 事件委托：React将所有事件委托到根容器，而非直接绑定到元素
3. 合成事件对象：提供跨浏览器兼容的统一事件接口
4. 阻止默认行为：必须显式调用preventDefault()，不能返回false
5. this绑定：需要手动绑定this或使用箭头函数

代码示例：

// HTML原生事件
<button onclick="handleClick()">Click me</button>

// JSX事件处理
function Button() {
    const handleClick = (e) => {
        e.preventDefault(); // 必须显式调用
        console.log('Button clicked', e.nativeEvent); // 访问原生事件
    };
    
    return <button onClick={handleClick}>Click me</button>;
}

// 事件委托示例
function List() {
    const handleItemClick = (e) => {
        console.log('Clicked item:', e.target.textContent);
    };
    
    return (
        <ul onClick={handleItemClick}>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    );
}

注意事项：

• 合成事件对象会被重用，异步访问需要调用e.persist()
• 可通过e.nativeEvent访问原生事件对象
• 事件处理函数接收合成事件作为参数
• React 17+中事件委托到应用根节点而非document

What is the difference between function components and class components in usage?

考察点：组件类型对比。

答案：

函数组件和类组件是React中定义组件的两种方式。React 16.8引入Hooks后，函数组件已成为主流推荐方式。函数组件语法简洁，结合Hooks可以实现类组件的所有功能，同时提供更好的性能和开发体验。

主要区别：

1. 语法形式：函数组件是纯函数，类组件是ES6类
2. 状态管理：函数组件使用useState，类组件使用this.state
3. 生命周期：函数组件使用useEffect，类组件有专门的生命周期方法
4. this绑定：函数组件无this问题，类组件需处理this绑定
5. 性能优化：函数组件使用React.memo，类组件使用PureComponent

代码示例：

// 类组件
class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
        this.increment = this.increment.bind(this);
    }
    
    componentDidMount() {
        document.title = `Count: ${this.state.count}`;
    }
    
    componentDidUpdate() {
        document.title = `Count: ${this.state.count}`;
    }
    
    increment() {
        this.setState({ count: this.state.count + 1 });
    }
    
    render() {
        return <button onClick={this.increment}>{this.state.count}</button>;
    }
}

// 函数组件 + Hooks
function Counter() {
    const [count, setCount] = useState(0);
    
    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);
    
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

适用场景：

• 函数组件：新项目首选，逻辑复用方便，性能更优
• 类组件：遗留代码维护，某些错误边界场景
• 选择建议：React 18+推荐全面使用函数组件+Hooks
• 迁移策略：逐步将类组件重构为函数组件

How do props implement data transfer between parent and child components?

考察点：数据流向理解。

答案：

props是React中实现父子组件数据传递的机制，遵循单向数据流原则。父组件通过props向子组件传递数据，子组件通过props接收数据并可以调用父组件传递的回调函数来实现向上通信。这种设计保证了数据流的可预测性和组件的独立性。

传递机制：

1. 向下传递：父组件通过JSX属性将数据传递给子组件
2. 向上通信：父组件传递回调函数，子组件调用实现反向通信
3. 类型检查：使用PropTypes或TypeScript进行类型验证
4. 默认值：通过defaultProps设置属性默认值
5. 解构赋值：子组件可以使用解构简化props访问

代码示例：

// 父组件
function Parent() {
    const [message, setMessage] = useState('Hello');
    const [count, setCount] = useState(0);
    
    const handleChildMessage = (childData) => {
        setMessage(childData);
    };
    
    return (
        <div>
            <h1>{message}</h1>
            <Child 
                title="子组件标题"
                count={count}
                onMessage={handleChildMessage}
                user={{ name: 'Alice', age: 25 }}
            />
        </div>
    );
}

// 子组件
function Child({ title, count, onMessage, user }) {
    const handleClick = () => {
        onMessage(`子组件说：当前计数是 ${count}`);
    };
    
    return (
        <div>
            <h2>{title}</h2>
            <p>用户：{user.name}，年龄：{user.age}</p>
            <p>计数：{count}</p>
            <button onClick={handleClick}>发送消息给父组件</button>
        </div>
    );
}

// 使用PropTypes进行类型检查
Child.propTypes = {
    title: PropTypes.string.isRequired,
    count: PropTypes.number,
    onMessage: PropTypes.func,
    user: PropTypes.object
};

Child.defaultProps = {
    count: 0,
    onMessage: () => {}
};

最佳实践：

• 保持props数据的不可变性，不要在子组件中修改props
• 使用解构赋值简化props访问
• 合理使用PropTypes或TypeScript进行类型检查
• 避免传递过多props，考虑使用组合或Context API

How does React 18’s automatic batching affect state updates?

考察点：批处理机制。

答案：

React 18的自动批处理将多个状态更新自动合并为一次重渲染，显著提升了应用性能。不同于React 17只在事件处理器中进行批处理，React 18扩展了批处理范围，包括Promise、setTimeout等异步操作中的状态更新也会被自动批处理。

批处理影响：

1. 性能提升：减少不必要的重渲染次数，提高应用响应速度
2. 一致性保证：同一批次的状态更新保证在同一次渲染中生效
3. 异步场景覆盖：Promise、setTimeout等异步操作也享受批处理优化
4. 开发体验改善：无需手动优化批处理，框架自动处理
5. 向后兼容：现有代码无需修改即可享受性能提升

代码示例：

function BatchingExample() {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(0);
    const [count3, setCount3] = useState(0);
    
    // React 18中只会触发一次重渲染
    const handleClick = () => {
        setCount1(c => c + 1);
        setCount2(c => c + 1); 
        setCount3(c => c + 1);
        // 三次更新会被批处理
    };
    
    // 异步操作中的批处理（React 18新特性）
    const handleAsyncClick = () => {
        setTimeout(() => {
            setCount1(c => c + 1);
            setCount2(c => c + 1);
            // React 18中这两个更新也会被批处理
        }, 1000);
    };
    
    // 阻止批处理（需要立即更新）
    const handleFlushSync = () => {
        flushSync(() => {
            setCount1(c => c + 1);
        });
        // 这会立即触发渲染
        flushSync(() => {
            setCount2(c => c + 1);
        });
        // 这也会立即触发渲染
    };
    
    console.log('Component rendered'); // 观察渲染次数
    
    return (
        <div>
            <p>Count1: {count1}</p>
            <p>Count2: {count2}</p>
            <p>Count3: {count3}</p>
            <button onClick={handleClick}>同步批处理</button>
            <button onClick={handleAsyncClick}>异步批处理</button>
            <button onClick={handleFlushSync}>强制立即更新</button>
        </div>
    );
}

注意事项：

• 使用flushSync可以强制立即更新，但会损失性能优势
• 批处理不会改变状态更新的执行顺序
• 依赖前一个状态的更新应使用函数式更新
• 批处理是自动的，无需开发者干预

What scenarios are controlled and uncontrolled components suitable for respectively?

考察点：表单控制策略。

答案：

受控组件和非受控组件是React中处理表单输入的两种策略。受控组件的值完全由React状态管理，提供更好的数据控制；非受控组件依赖DOM自身状态，通过ref获取值，适合简单表单或与第三方库集成。

适用场景对比：

受控组件适用场景：

1. 实时验证：需要在用户输入时进行验证反馈
2. 动态表单：表单字段需要根据其他字段动态变化
3. 格式化输入：需要对输入进行实时格式化（如电话号码）
4. 复杂交互：表单与其他组件有复杂的数据交互

非受控组件适用场景：

1. 简单表单：只需要提交时获取值，无需实时交互
2. 文件上传：文件输入框只能是非受控的
3. 第三方库集成：与jQuery等操作DOM的库集成
4. 性能优化：大型表单避免频繁re-render

代码示例：

// 受控组件示例
function ControlledForm() {
    const [formData, setFormData] = useState({
        email: '',
        password: ''
    });
    const [errors, setErrors] = useState({});
    
    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
        
        // 实时验证
        if (name === 'email') {
            setErrors(prev => ({
                ...prev,
                email: !value.includes('@') ? '邮箱格式不正确' : ''
            }));
        }
    };
    
    return (
        <form>
            <input
                name="email"
                value={formData.email}
                onChange={handleChange}
                placeholder="邮箱"
            />
            {errors.email && <span className="error">{errors.email}</span>}
            
            <input
                name="password"
                type="password"
                value={formData.password}
                onChange={handleChange}
                placeholder="密码"
            />
        </form>
    );
}

// 非受控组件示例
function UncontrolledForm() {
    const emailRef = useRef();
    const passwordRef = useRef();
    const fileRef = useRef();
    
    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = {
            email: emailRef.current.value,
            password: passwordRef.current.value,
            file: fileRef.current.files[0]
        };
        console.log('提交数据:', formData);
    };
    
    return (
        <form onSubmit={handleSubmit}>
            <input
                ref={emailRef}
                defaultValue="[email protected]"
                placeholder="邮箱"
            />
            <input
                ref={passwordRef}
                type="password"
                placeholder="密码"
            />
            {/* 文件上传只能是非受控的 */}
            <input
                ref={fileRef}
                type="file"
            />
            <button type="submit">提交</button>
        </form>
    );
}

选择建议：

• 优先选择受控组件，提供更好的用户体验
• 简单表单或性能敏感场景可考虑非受控组件
• 文件上传等特殊情况必须使用非受控组件
• 可以在同一个表单中混合使用两种策略

How does useEffect’s dependency array affect side effect execution?

考察点：依赖数组机制。

答案：

useEffect的依赖数组决定了副作用函数何时执行，是React Hooks中控制副作用执行时机的关键机制。React通过浅比较依赖数组中的值来判断是否需要重新执行副作用函数，这种设计既保证了性能又避免了不必要的副作用执行。

依赖数组的三种形式：

1. 无依赖数组：每次渲染都执行
2. 空依赖数组：仅在组件挂载和卸载时执行
3. 有依赖值：当依赖值发生变化时执行

代码示例：

function EffectExample({ userId, filter }) {
    const [user, setUser] = useState(null);
    const [count, setCount] = useState(0);
    
    // 1. 无依赖数组 - 每次渲染都执行
    useEffect(() => {
        console.log('每次渲染都执行');
    });
    
    // 2. 空依赖数组 - 仅在挂载/卸载时执行
    useEffect(() => {
        console.log('组件挂载');
        return () => {
            console.log('组件卸载');
        };
    }, []);
    
    // 3. 依赖userId - 当userId改变时执行
    useEffect(() => {
        async function fetchUser() {
            if (userId) {
                const response = await fetch(`/api/users/${userId}`);
                const userData = await response.json();
                setUser(userData);
            }
        }
        fetchUser();
    }, [userId]); // 只有userId变化时才重新获取用户数据
    
    // 4. 多个依赖 - 任一依赖变化都会执行
    useEffect(() => {
        document.title = `User: ${user?.name || 'Unknown'} - Filter: ${filter}`;
    }, [user?.name, filter]);
    
    // 5. 函数依赖的正确处理
    const fetchData = useCallback(async () => {
        const response = await fetch(`/api/data?filter=${filter}`);
        return response.json();
    }, [filter]);
    
    useEffect(() => {
        fetchData().then(data => {
            console.log('数据更新:', data);
        });
    }, [fetchData]); // 使用useCallback包装的函数作为依赖
    
    // 6. 清理副作用
    useEffect(() => {
        const timer = setInterval(() => {
            setCount(c => c + 1);
        }, 1000);
        
        return () => {
            clearInterval(timer); // 清理定时器
        };
    }, []); // 空依赖，定时器只创建一次
    
    return (
        <div>
            <p>Count: {count}</p>
            <p>User: {user?.name}</p>
        </div>
    );
}

常见陷阱和最佳实践：

1. 遗漏依赖：使用ESLint插件检查依赖完整性
2. 对象依赖：避免将对象直接作为依赖，使用具体属性
3. 函数依赖：将函数用useCallback包装或移到useEffect内部
4. 清理副作用：及时清理定时器、事件监听器、订阅等
5. 条件执行：在useEffect内部进行条件判断，而非依赖数组中

How to understand the asynchronous update characteristics of useState?

考察点：异步状态更新。

答案：

useState的异步更新是React为了性能优化而采用的设计策略。状态更新函数调用后不会立即改变状态值，而是安排在下次渲染时更新。这种异步机制配合批处理能够避免不必要的重渲染，但也要求开发者理解其执行时机和正确的使用方式。

异步更新特性：

1. 延迟更新：状态更新不会立即生效，而是在下次渲染时应用
2. 批处理优化：多个状态更新会被合并为一次重渲染
3. 闭包陷阱：在异步操作中可能获取到过期的状态值
4. 函数式更新：使用回调函数确保获取最新状态
5. 调度优先级：React根据更新类型分配不同的优先级

代码示例：

function AsyncUpdateExample() {
    const [count, setCount] = useState(0);
    const [message, setMessage] = useState('');
    
    // 1. 基本异步更新演示
    const handleBasicUpdate = () => {
        console.log('更新前:', count); // 0
        setCount(count + 1);
        console.log('更新后:', count); // 仍然是0，因为异步更新
        // 实际的count值会在下次渲染时变为1
    };
    
    // 2. 多次更新的陷阱
    const handleMultipleUpdates = () => {
        setCount(count + 1); // count = 0，设置为1
        setCount(count + 1); // count仍然是0，设置为1
        setCount(count + 1); // count仍然是0，设置为1
        // 最终结果是1，而不是3
    };
    
    // 3. 函数式更新解决方案
    const handleFunctionalUpdate = () => {
        setCount(prevCount => prevCount + 1); // 1
        setCount(prevCount => prevCount + 1); // 2
        setCount(prevCount => prevCount + 1); // 3
        // 最终结果是3
    };
    
    // 4. 异步操作中的闭包陷阱
    const handleAsyncOperation = () => {
        setTimeout(() => {
            // 这里的count可能是过期的值
            setCount(count + 1); // 可能不是期望的结果
            
            // 正确做法：使用函数式更新
            setCount(prevCount => prevCount + 1);
        }, 1000);
    };
    
    // 5. 复杂场景：依赖前一个状态的更新
    const handleComplexUpdate = () => {
        // 批处理：这些更新会在同一次渲染中应用
        setCount(prevCount => {
            const newCount = prevCount + 1;
            setMessage(`Count updated to ${newCount}`);
            return newCount;
        });
    };
    
    // 6. 使用useEffect监听状态变化
    useEffect(() => {
        console.log('Count changed to:', count);
        // 这里可以获取到最新的count值
    }, [count]);
    
    // 7. 立即获取更新后的值（不推荐，仅用于特殊场景）
    const handleImmediateRead = () => {
        const newCount = count + 1;
        setCount(newCount);
        // 使用计算出的newCount而不是count
        console.log('New count will be:', newCount);
    };
    
    return (
        <div>
            <p>Count: {count}</p>
            <p>Message: {message}</p>
            <button onClick={handleBasicUpdate}>基本更新</button>
            <button onClick={handleMultipleUpdates}>多次更新陷阱</button>
            <button onClick={handleFunctionalUpdate}>函数式更新</button>
            <button onClick={handleAsyncOperation}>异步操作</button>
            <button onClick={handleComplexUpdate}>复杂更新</button>
            <button onClick={handleImmediateRead}>立即读取</button>
        </div>
    );
}

最佳实践：

• 使用函数式更新处理依赖前一个状态的更新
• 在异步操作中避免直接使用状态值
• 通过useEffect监听状态变化而非同步读取
• 理解批处理机制，避免对异步更新的误解

What impact do React 18’s concurrent features have on developers?

考察点：并发特性认知。

答案：

React 18的并发特性为开发者带来了更细粒度的渲染控制和更好的用户体验优化能力。这些特性让React能够中断、暂停和恢复组件渲染，根据任务优先级智能调度，但也要求开发者理解新的心智模型和潜在的副作用。

主要影响：

1. 性能优化机会：可以标记低优先级更新，保证关键交互的响应性
2. 新的思维模式：需要从同步思维转向并发思维
3. 副作用管理：严格模式下的双重调用帮助发现副作用问题
4. API使用变化：新增startTransition、useDeferredValue等API
5. 调试复杂度：异步渲染可能增加调试难度

代码示例：

import { startTransition, useDeferredValue, Suspense } from 'react';

function ConcurrentExample() {
    const [isPending, startTransition] = useTransition();
    const [query, setQuery] = useState('');
    const [results, setResults] = useState([]);
    
    // 延迟值，用于优化搜索体验
    const deferredQuery = useDeferredValue(query);
    
    // 紧急更新：用户输入
    const handleInputChange = (e) => {
        setQuery(e.target.value); // 高优先级，立即更新
    };
    
    // 非紧急更新：搜索结果
    const handleSearch = () => {
        startTransition(() => {
            // 低优先级更新，可以被中断
            const searchResults = performExpensiveSearch(deferredQuery);
            setResults(searchResults);
        });
    };
    
    // 模拟昂贵的搜索操作
    const performExpensiveSearch = (query) => {
        // 模拟计算密集型操作
        const results = [];
        for (let i = 0; i < 10000; i++) {
            if (i.toString().includes(query)) {
                results.push(`Result ${i}`);
            }
        }
        return results.slice(0, 100);
    };
    
    return (
        <div>
            <div>
                <input
                    value={query}
                    onChange={handleInputChange}
                    placeholder="搜索..."
                />
                <button onClick={handleSearch}>
                    搜索 {isPending && '(搜索中...)'}
                </button>
            </div>
            
            {/* Suspense边界处理异步加载 */}
            <Suspense fallback={<div>Loading results...</div>}>
                <SearchResults results={results} />
            </Suspense>
        </div>
    );
}

// 使用memo优化组件渲染
const SearchResults = React.memo(({ results }) => {
    return (
        <ul>
            {results.map((result, index) => (
                <li key={index}>{result}</li>
            ))}
        </ul>
    );
});

// 并发安全的组件示例
function ConcurrentSafeComponent() {
    const [data, setData] = useState(null);
    
    useEffect(() => {
        let cancelled = false;
        
        async function fetchData() {
            const result = await api.getData();
            
            // 检查组件是否仍然挂载
            if (!cancelled) {
                setData(result);
            }
        }
        
        fetchData();
        
        return () => {
            cancelled = true; // 清理函数防止内存泄漏
        };
    }, []);
    
    return data ? <div>{data.content}</div> : <div>Loading...</div>;
}

开发注意事项：

1. 副作用安全：确保useEffect和事件处理器是幂等的
2. 状态一致性：避免依赖渲染过程中的中间状态
3. 性能分析：使用React DevTools Profiler分析并发渲染效果
4. 渐进采用：可以逐步引入并发特性，不需要全面重构
5. 测试策略：严格模式下测试确保组件能正确处理重复调用

How to avoid directly modifying state in React?

考察点：不可变性原则。

答案：

React要求遵循不可变性原则，不能直接修改state对象。直接修改state会导致组件无法正确重新渲染，因为React使用Object.is()进行浅比较来判断state是否发生变化。正确的做法是创建新的对象或数组来替换原有状态。

不可变更新模式：

1. 对象更新：使用扩展运算符创建新对象
2. 数组更新：使用数组方法创建新数组
3. 嵌套更新：逐层创建新的对象结构
4. 条件更新：根据条件决定是否创建新状态
5. 工具库辅助：使用Immer等库简化不可变更新

代码示例：

function ImmutableStateExample() {
    const [user, setUser] = useState({
        name: 'Alice',
        age: 25,
        preferences: {
            theme: 'dark',
            language: 'zh-CN'
        },
        hobbies: ['reading', 'coding']
    });
    
    // ❌ 错误：直接修改state
    const handleWrongUpdate = () => {
        user.age = 26; // 直接修改
        user.hobbies.push('gaming'); // 直接修改数组
        setUser(user); // 组件不会重新渲染
    };
    
    // ✅ 正确：对象属性更新
    const handleObjectUpdate = () => {
        setUser(prevUser => ({
            ...prevUser,
            age: prevUser.age + 1
        }));
    };
    
    // ✅ 正确：嵌套对象更新
    const handleNestedUpdate = () => {
        setUser(prevUser => ({
            ...prevUser,
            preferences: {
                ...prevUser.preferences,
                theme: prevUser.preferences.theme === 'dark' ? 'light' : 'dark'
            }
        }));
    };
    
    // ✅ 正确：数组更新操作
    const handleArrayOperations = () => {
        setUser(prevUser => ({
            ...prevUser,
            hobbies: [
                ...prevUser.hobbies,
                'gaming' // 添加新元素
            ]
        }));
    };
    
    const handleArrayRemove = (indexToRemove) => {
        setUser(prevUser => ({
            ...prevUser,
            hobbies: prevUser.hobbies.filter((_, index) => index !== indexToRemove)
        }));
    };
    
    const handleArrayUpdate = (indexToUpdate, newHobby) => {
        setUser(prevUser => ({
            ...prevUser,
            hobbies: prevUser.hobbies.map((hobby, index) => 
                index === indexToUpdate ? newHobby : hobby
            )
        }));
    };
    
    // ✅ 使用useCallback优化更新函数
    const handleComplexUpdate = useCallback((updates) => {
        setUser(prevUser => {
            // 深度合并逻辑
            const mergeDeep = (target, source) => {
                const result = { ...target };
                for (const key in source) {
                    if (source[key] && typeof source[key] === 'object') {
                        result[key] = mergeDeep(target[key] || {}, source[key]);
                    } else {
                        result[key] = source[key];
                    }
                }
                return result;
            };
            
            return mergeDeep(prevUser, updates);
        });
    }, []);
    
    return (
        <div>
            <h3>用户信息</h3>
            <p>姓名: {user.name}</p>
            <p>年龄: {user.age}</p>
            <p>主题: {user.preferences.theme}</p>
            <p>爱好: {user.hobbies.join(', ')}</p>
            
            <button onClick={handleObjectUpdate}>年龄+1</button>
            <button onClick={handleNestedUpdate}>切换主题</button>
            <button onClick={handleArrayOperations}>添加爱好</button>
        </div>
    );
}

// 使用Immer简化不可变更新
import { produce } from 'immer';

function ImmerExample() {
    const [state, setState] = useState(initialComplexState);
    
    const handleUpdateWithImmer = () => {
        setState(produce(draft => {
            // 可以直接"修改"draft对象
            draft.user.age += 1;
            draft.user.hobbies.push('gaming');
            draft.user.preferences.theme = 'light';
        }));
    };
    
    return (
        <button onClick={handleUpdateWithImmer}>
            使用Immer更新
        </button>
    );
}

最佳实践：

• 总是使用setState函数更新状态，永远不要直接修改state
• 对于复杂状态结构，考虑使用useReducer或状态管理库
• 利用Immer等工具库简化深度嵌套对象的不可变更新
• 在开发环境使用严格模式和不可变性检查工具

What problems does Context API solve? What is its basic usage?

考察点：Context基础用法。

答案：

Context API解决了React中的"props drilling"（属性钻取）问题，允许跨多层组件传递数据而无需逐层传递props。它提供了一种在组件树中共享全局状态的机制，适用于主题、用户认证、语言设置等需要被多个组件访问的数据。

解决的核心问题：

1. Props Drilling：避免通过多层组件传递props
2. 全局状态共享：为深层嵌套组件提供共享数据
3. 主题和配置：统一管理应用级配置
4. 用户状态：在整个应用中共享用户信息
5. 国际化：提供语言和本地化支持

代码示例：

import { createContext, useContext, useState, useReducer } from 'react';

// 1. 创建Context
const ThemeContext = createContext();
const UserContext = createContext();

// 2. 主题Context Provider
function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');
    
    const toggleTheme = () => {
        setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
    };
    
    const value = {
        theme,
        toggleTheme
    };
    
    return (
        <ThemeContext.Provider value={value}>
            {children}
        </ThemeContext.Provider>
    );
}

// 3. 用户Context与Reducer结合
const userReducer = (state, action) => {
    switch (action.type) {
        case 'LOGIN':
            return {
                ...state,
                user: action.payload,
                isAuthenticated: true
            };
        case 'LOGOUT':
            return {
                ...state,
                user: null,
                isAuthenticated: false
            };
        case 'UPDATE_PROFILE':
            return {
                ...state,
                user: { ...state.user, ...action.payload }
            };
        default:
            return state;
    }
};

function UserProvider({ children }) {
    const [state, dispatch] = useReducer(userReducer, {
        user: null,
        isAuthenticated: false,
        loading: false
    });
    
    const login = async (credentials) => {
        try {
            const user = await authenticateUser(credentials);
            dispatch({ type: 'LOGIN', payload: user });
        } catch (error) {
            console.error('Login failed:', error);
        }
    };
    
    const logout = () => {
        dispatch({ type: 'LOGOUT' });
    };
    
    const value = {
        ...state,
        login,
        logout,
        dispatch
    };
    
    return (
        <UserContext.Provider value={value}>
            {children}
        </UserContext.Provider>
    );
}

// 4. 自定义Hook简化使用
const useTheme = () => {
    const context = useContext(ThemeContext);
    if (!context) {
        throw new Error('useTheme must be used within ThemeProvider');
    }
    return context;
};

const useUser = () => {
    const context = useContext(UserContext);
    if (!context) {
        throw new Error('useUser must be used within UserProvider');
    }
    return context;
};

// 5. 使用Context的组件
function Header() {
    const { theme, toggleTheme } = useTheme();
    const { user, logout, isAuthenticated } = useUser();
    
    return (
        <header className={`header ${theme}`}>
            <h1>My App</h1>
            <div>
                <button onClick={toggleTheme}>
                    切换到 {theme === 'light' ? '暗色' : '亮色'} 主题
                </button>
                {isAuthenticated ? (
                    <div>
                        <span>欢迎, {user.name}</span>
                        <button onClick={logout}>退出</button>
                    </div>
                ) : (
                    <LoginButton />
                )}
            </div>
        </header>
    );
}

function LoginButton() {
    const { login } = useUser();
    
    const handleLogin = () => {
        login({ username: '[email protected]', password: '123456' });
    };
    
    return <button onClick={handleLogin}>登录</button>;
}

// 6. 应用根组件
function App() {
    return (
        <ThemeProvider>
            <UserProvider>
                <div className="app">
                    <Header />
                    <main>
                        <Dashboard />
                        <ProfilePage />
                    </main>
                </div>
            </UserProvider>
        </ThemeProvider>
    );
}

// 7. 多个Context的组合使用
function Dashboard() {
    const { theme } = useTheme();
    const { user, isAuthenticated } = useUser();
    
    if (!isAuthenticated) {
        return <div>请先登录</div>;
    }
    
    return (
        <div className={`dashboard ${theme}`}>
            <h2>仪表板</h2>
            <p>当前用户: {user.name}</p>
            <p>当前主题: {theme}</p>
        </div>
    );
}

使用注意事项：

• Context值变化会导致所有消费组件重新渲染
• 避免在Context中放置频繁变化的数据
• 使用多个小的Context而不是一个大的Context
• 提供自定义Hook简化Context使用
• 在Provider组件中使用useMemo优化context值

What is the mechanism of key in React?

考察点：key底层原理。

答案：

React中的key是虚拟DOM diff算法的重要优化机制，用于标识列表中每个元素的唯一性。当组件重新渲染时，React通过key来判断哪些元素是新增、删除、移动或更新的，从而进行精确的DOM操作，避免不必要的元素重建。

工作机制：

1. 元素标识：key为每个列表项提供稳定的身份标识
2. Diff优化：React通过key快速比较新旧虚拟DOM树
3. DOM复用：相同key的元素会被复用，只更新变化的属性
4. 位置无关：即使元素位置改变，有相同key的元素仍会被识别为同一个
5. 性能提升：避免销毁和重建DOM元素，提高渲染性能

代码示例：

function KeyExample() {
    const [items, setItems] = useState([
        { id: 1, name: 'Apple', price: 1.2 },
        { id: 2, name: 'Banana', price: 0.8 },
        { id: 3, name: 'Orange', price: 1.5 }
    ]);
    const [showInput, setShowInput] = useState(false);
    
    // ❌ 错误：使用索引作为key
    const BadExample = () => (
        <ul>
            {items.map((item, index) => (
                <li key={index}>
                    <input type="text" defaultValue={item.name} />
                    <span>{item.price}</span>
                </li>
            ))}
        </ul>
    );
    
    // ✅ 正确：使用稳定的唯一标识符作为key
    const GoodExample = () => (
        <ul>
            {items.map((item) => (
                <li key={item.id}>
                    <input type="text" defaultValue={item.name} />
                    <span>{item.price}</span>
                    <button onClick={() => removeItem(item.id)}>删除</button>
                </li>
            ))}
        </ul>
    );
    
    // 演示key的重要性：添加到列表开头
    const addItemToStart = () => {
        const newItem = {
            id: Date.now(),
            name: 'New Item',
            price: Math.random() * 2
        };
        setItems([newItem, ...items]);
    };
    
    const removeItem = (id) => {
        setItems(items.filter(item => item.id !== id));
    };
    
    const shuffleItems = () => {
        const shuffled = [...items].sort(() => Math.random() - 0.5);
        setItems(shuffled);
    };
    
    // 条件渲染中的key使用
    const ConditionalExample = () => (
        <div>
            {showInput ? (
                <input key="search" type="text" placeholder="搜索..." />
            ) : (
                <button key="toggle" onClick={() => setShowInput(true)}>
                    显示搜索框
                </button>
            )}
        </div>
    );
    
    return (
        <div>
            <h3>Key 机制演示</h3>
            
            <div>
                <button onClick={addItemToStart}>添加到开头</button>
                <button onClick={shuffleItems}>随机排序</button>
                <button onClick={() => setShowInput(!showInput)}>
                    切换输入框
                </button>
            </div>
            
            <div style={{ display: 'flex', gap: '20px' }}>
                <div>
                    <h4>❌ 使用索引作为key（会有问题）</h4>
                    <BadExample />
                </div>
                
                <div>
                    <h4>✅ 使用唯一ID作为key</h4>
                    <GoodExample />
                </div>
            </div>
            
            <ConditionalExample />
        </div>
    );
}

// 复杂场景：嵌套列表中的key
function NestedListExample() {
    const [categories, setCategories] = useState([
        {
            id: 'fruits',
            name: '水果',
            items: [
                { id: 'apple', name: '苹果' },
                { id: 'banana', name: '香蕉' }
            ]
        },
        {
            id: 'vegetables',
            name: '蔬菜', 
            items: [
                { id: 'carrot', name: '胡萝卜' },
                { id: 'broccoli', name: '西兰花' }
            ]
        }
    ]);
    
    return (
        <div>
            {categories.map(category => (
                <div key={category.id}>
                    <h3>{category.name}</h3>
                    <ul>
                        {category.items.map(item => (
                            <li key={`${category.id}-${item.id}`}>
                                {item.name}
                            </li>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    );
}

// Fragment中的key使用
function FragmentKeyExample({ items }) {
    return (
        <div>
            {items.map(item => (
                <React.Fragment key={item.id}>
                    <h4>{item.title}</h4>
                    <p>{item.description}</p>
                </React.Fragment>
            ))}
        </div>
    );
}

Key选择原则：

• 唯一性：在兄弟元素中必须唯一
• 稳定性：不要使用随机数或时间戳
• 可预测性：相同数据应该有相同的key
• 避免索引：除非列表是静态且不会重排序
• 字符串优先：React内部对字符串key有优化

常见问题和解决方案：

• 使用数组索引导致的输入框值错乱问题
• 条件渲染中缺少key导致的状态保持问题
• 嵌套列表中key冲突问题的解决方案

Why do components render twice in React 18 strict mode?

考察点：严格模式机制。

答案：

React 18严格模式下的双重渲染是为了帮助开发者检测副作用和并发安全问题而设计的开发时特性。这种机制通过故意重复执行组件函数、Effect和事件处理器来暴露不安全的副作用，确保组件在并发渲染环境下能够正确工作。

双重渲染的目的：

1. 副作用检测：发现组件中的不纯函数和副作用
2. 并发准备：确保组件能适应可中断和重新开始的渲染
3. 状态一致性：验证组件在重复执行时状态的一致性
4. 内存泄漏预防：检测Effect清理函数是否正确实现
5. 开发体验：早期发现可能在生产环境中出现的问题

代码示例：

import { StrictMode, useState, useEffect, useRef } from 'react';

// 1. 演示严格模式下的双重渲染
function StrictModeExample() {
    const [count, setCount] = useState(0);
    const renderCount = useRef(0);
    
    // 在严格模式下这会执行两次
    renderCount.current += 1;
    console.log(`组件渲染第 ${renderCount.current} 次`);
    
    return (
        <div>
            <p>Count: {count}</p>
            <p>Render count: {renderCount.current}</p>
            <button onClick={() => setCount(c => c + 1)}>增加</button>
        </div>
    );
}

// 2. ❌ 有副作用的组件（严格模式会暴露问题）
function ComponentWithSideEffects() {
    const [data, setData] = useState(null);
    
    // ❌ 问题：直接在组件函数中产生副作用
    // 严格模式下会执行两次，可能导致重复的网络请求
    if (!data) {
        fetch('/api/data').then(res => res.json()).then(setData);
    }
    
    return <div>{data ? data.message : 'Loading...'}</div>;
}

// 3. ✅ 修正：将副作用移到useEffect中
function ComponentWithoutSideEffects() {
    const [data, setData] = useState(null);
    
    useEffect(() => {
        let cancelled = false;
        
        fetch('/api/data')
            .then(res => res.json())
            .then(result => {
                if (!cancelled) {
                    setData(result);
                }
            });
        
        return () => {
            cancelled = true; // 清理函数防止内存泄漏
        };
    }, []);
    
    return <div>{data ? data.message : 'Loading...'}</div>;
}

// 4. Effect的双重执行演示
function EffectStrictModeExample() {
    const [user, setUser] = useState(null);
    
    useEffect(() => {
        console.log('Effect执行：设置用户数据');
        
        // 模拟订阅
        const subscription = subscribeToUser(userId, setUser);
        
        return () => {
            console.log('Effect清理：取消订阅');
            subscription.unsubscribe();
        };
    }, []);
    
    // 在严格模式下，你会看到：
    // "Effect执行：设置用户数据"
    // "Effect清理：取消订阅"  
    // "Effect执行：设置用户数据"（再次执行）
    
    return <div>User: {user?.name}</div>;
}

// 5. 正确处理双重渲染的模式
function ProperStrictModeComponent() {
    const [items, setItems] = useState([]);
    const [loading, setLoading] = useState(false);
    const abortControllerRef = useRef();
    
    const fetchItems = useCallback(async () => {
        // 取消之前的请求
        abortControllerRef.current?.abort();
        
        const controller = new AbortController();
        abortControllerRef.current = controller;
        
        setLoading(true);
        
        try {
            const response = await fetch('/api/items', {
                signal: controller.signal
            });
            
            if (!response.ok) throw new Error('Failed to fetch');
            
            const data = await response.json();
            setItems(data);
        } catch (error) {
            if (error.name !== 'AbortError') {
                console.error('Fetch error:', error);
            }
        } finally {
            setLoading(false);
        }
    }, []);
    
    useEffect(() => {
        fetchItems();
        
        return () => {
            abortControllerRef.current?.abort();
        };
    }, [fetchItems]);
    
    return (
        <div>
            {loading ? 'Loading...' : `Found ${items.length} items`}
        </div>
    );
}

// 6. 应用根组件中启用严格模式
function App() {
    return (
        <StrictMode>
            <div className="app">
                <h1>React 18 Strict Mode Demo</h1>
                <StrictModeExample />
                <ComponentWithoutSideEffects />
                <EffectStrictModeExample />
                <ProperStrictModeComponent />
            </div>
        </StrictMode>
    );
}

严格模式检查项目：

• 识别不安全的生命周期方法
• 检测副作用和不纯的函数
• 验证Effect清理函数的正确性
• 发现过时的字符串ref API使用
• 检测意外的副作用

最佳实践：

• 确保组件函数是纯函数，不产生副作用
• 在useEffect中正确实现清理逻辑
• 使用AbortController取消异步操作
• 避免在组件函数中直接修改外部状态
• 生产环境中严格模式不会影响性能

What other uses does useRef have besides getting DOM?

考察点：useRef多重用途。

答案：

useRef除了获取DOM元素外，还有多种重要用途。它创建一个可变的引用对象，其.current属性可以存储任何值，且在组件重新渲染时保持不变。这使得useRef成为存储可变值、缓存计算结果、保存定时器ID等场景的理想选择。

主要用途：

1. 存储可变值：保存不触发重渲染的可变数据
2. 缓存计算结果：存储昂贵计算的结果
3. 保存定时器ID：管理定时器和清理操作
4. 跟踪前一个值：保存state或props的前一个值
5. 存储实例变量：替代类组件中的实例变量

代码示例：

import { useRef, useState, useEffect, useCallback } from 'react';

// 1. 存储可变值（不触发重渲染）
function Counter() {
    const [count, setCount] = useState(0);
    const renderCount = useRef(0);
    
    // 每次渲染时增加，但不会触发重渲染
    renderCount.current += 1;
    
    return (
        <div>
            <p>Count: {count}</p>
            <p>Render times: {renderCount.current}</p>
            <button onClick={() => setCount(c => c + 1)}>增加</button>
        </div>
    );
}

// 2. 保存定时器ID和清理
function Timer() {
    const [seconds, setSeconds] = useState(0);
    const intervalRef = useRef(null);
    const [isRunning, setIsRunning] = useState(false);
    
    const startTimer = () => {
        if (!isRunning) {
            intervalRef.current = setInterval(() => {
                setSeconds(prev => prev + 1);
            }, 1000);
            setIsRunning(true);
        }
    };
    
    const stopTimer = () => {
        if (intervalRef.current) {
            clearInterval(intervalRef.current);
            intervalRef.current = null;
            setIsRunning(false);
        }
    };
    
    const resetTimer = () => {
        stopTimer();
        setSeconds(0);
    };
    
    useEffect(() => {
        // 组件卸载时清理定时器
        return () => {
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        };
    }, []);
    
    return (
        <div>
            <p>Time: {seconds}s</p>
            <button onClick={startTimer} disabled={isRunning}>开始</button>
            <button onClick={stopTimer} disabled={!isRunning}>停止</button>
            <button onClick={resetTimer}>重置</button>
        </div>
    );
}

// 3. 跟踪前一个值
function usePrevious(value) {
    const ref = useRef();
    
    useEffect(() => {
        ref.current = value;
    });
    
    return ref.current;
}

function PreviousValueExample() {
    const [count, setCount] = useState(0);
    const prevCount = usePrevious(count);
    
    return (
        <div>
            <p>当前值: {count}</p>
            <p>前一个值: {prevCount}</p>
            <button onClick={() => setCount(c => c + 1)}>增加</button>
        </div>
    );
}

// 4. 缓存昂贵计算的结果
function ExpensiveCalculation({ input }) {
    const cacheRef = useRef(new Map());
    
    const getResult = useCallback((input) => {
        // 检查缓存
        if (cacheRef.current.has(input)) {
            console.log('从缓存获取结果');
            return cacheRef.current.get(input);
        }
        
        // 模拟昂贵计算
        console.log('执行昂贵计算');
        const result = input * input * Math.random();
        
        // 缓存结果
        cacheRef.current.set(input, result);
        
        return result;
    }, []);
    
    const result = getResult(input);
    
    return <div>计算结果: {result.toFixed(2)}</div>;
}

// 5. 防抖Hook实现
function useDebounce(callback, delay) {
    const timeoutRef = useRef(null);
    
    return useCallback((...args) => {
        // 清除之前的定时器
        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
        }
        
        // 设置新的定时器
        timeoutRef.current = setTimeout(() => {
            callback(...args);
        }, delay);
    }, [callback, delay]);
}

function SearchInput() {
    const [query, setQuery] = useState('');
    const [results, setResults] = useState([]);
    
    const debouncedSearch = useDebounce(async (searchQuery) => {
        if (searchQuery) {
            // 模拟API调用
            const response = await fetch(`/api/search?q=${searchQuery}`);
            const data = await response.json();
            setResults(data);
        }
    }, 500);
    
    const handleInputChange = (e) => {
        const value = e.target.value;
        setQuery(value);
        debouncedSearch(value);
    };
    
    return (
        <div>
            <input
                value={query}
                onChange={handleInputChange}
                placeholder="搜索..."
            />
            <ul>
                {results.map(item => (
                    <li key={item.id}>{item.title}</li>
                ))}
            </ul>
        </div>
    );
}

// 6. 存储组件实例数据
function ComponentInstance() {
    const instanceRef = useRef({
        id: Math.random().toString(36),
        createdAt: new Date(),
        callCount: 0
    });
    
    const handleClick = () => {
        instanceRef.current.callCount += 1;
        console.log(`组件 ${instanceRef.current.id} 被点击 ${instanceRef.current.callCount} 次`);
    };
    
    return (
        <div>
            <p>组件ID: {instanceRef.current.id}</p>
            <p>创建时间: {instanceRef.current.createdAt.toLocaleString()}</p>
            <button onClick={handleClick}>点击我</button>
        </div>
    );
}

// 7. 与第三方库集成
function ChartComponent({ data }) {
    const chartRef = useRef(null);
    const chartInstanceRef = useRef(null);
    
    useEffect(() => {
        if (chartRef.current && !chartInstanceRef.current) {
            // 初始化图表库
            chartInstanceRef.current = new SomeChartLibrary(chartRef.current);
        }
        
        if (chartInstanceRef.current) {
            // 更新图表数据
            chartInstanceRef.current.updateData(data);
        }
    }, [data]);
    
    useEffect(() => {
        return () => {
            // 清理图表实例
            if (chartInstanceRef.current) {
                chartInstanceRef.current.destroy();
            }
        };
    }, []);
    
    return <div ref={chartRef} className="chart-container" />;
}

使用场景总结：

• 性能优化：缓存计算结果、防抖节流
• 副作用管理：存储定时器、订阅ID
• 状态跟踪：保存前一个值、计数器
• 第三方集成：存储库实例、配置对象
• 组件通信：在不触发重渲染情况下共享数据

How to handle form validation in React?

考察点：表单处理实践。

答案：

React中的表单验证可以通过多种方式实现，从简单的内置验证到复杂的第三方库集成。常见方法包括实时验证、提交时验证、以及结合表单库如React Hook Form或Formik进行高级表单管理。

验证策略：

1. 实时验证：在用户输入时即时反馈
2. 失焦验证：字段失去焦点时进行验证
3. 提交验证：表单提交时统一验证
4. 混合策略：结合多种验证时机
5. 服务端验证：前端验证后的后端验证

代码示例：

import { useState, useReducer } from 'react';

// 1. 基础表单验证实现
function BasicFormValidation() {
    const [formData, setFormData] = useState({
        email: '',
        password: '',
        confirmPassword: ''
    });
    
    const [errors, setErrors] = useState({});
    const [touched, setTouched] = useState({});
    
    // 验证规则
    const validateField = (name, value) => {
        switch (name) {
            case 'email':
                return !value 
                    ? '邮箱不能为空' 
                    : !/\S+@\S+\.\S+/.test(value) 
                    ? '邮箱格式不正确' 
                    : '';
                    
            case 'password':
                return !value 
                    ? '密码不能为空' 
                    : value.length < 6 
                    ? '密码至少6位' 
                    : '';
                    
            case 'confirmPassword':
                return !value 
                    ? '请确认密码' 
                    : value !== formData.password 
                    ? '密码不一致' 
                    : '';
                    
            default:
                return '';
        }
    };
    
    // 处理输入变化
    const handleChange = (e) => {
        const { name, value } = e.target;
        
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
        
        // 实时验证
        if (touched[name]) {
            const error = validateField(name, value);
            setErrors(prev => ({
                ...prev,
                [name]: error
            }));
        }
    };
    
    // 处理失焦
    const handleBlur = (e) => {
        const { name, value } = e.target;
        
        setTouched(prev => ({
            ...prev,
            [name]: true
        }));
        
        const error = validateField(name, value);
        setErrors(prev => ({
            ...prev,
            [name]: error
        }));
    };
    
    // 提交表单
    const handleSubmit = (e) => {
        e.preventDefault();
        
        // 验证所有字段
        const newErrors = {};
        Object.keys(formData).forEach(name => {
            const error = validateField(name, formData[name]);
            if (error) newErrors[name] = error;
        });
        
        setErrors(newErrors);
        setTouched(Object.keys(formData).reduce((acc, key) => {
            acc[key] = true;
            return acc;
        }, {}));
        
        if (Object.keys(newErrors).length === 0) {
            console.log('表单提交:', formData);
        }
    };
    
    return (
        <form onSubmit={handleSubmit}>
            <div>
                <input
                    name="email"
                    type="email"
                    value={formData.email}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    placeholder="邮箱"
                />
                {touched.email && errors.email && (
                    <span className="error">{errors.email}</span>
                )}
            </div>
            
            <div>
                <input
                    name="password"
                    type="password"
                    value={formData.password}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    placeholder="密码"
                />
                {touched.password && errors.password && (
                    <span className="error">{errors.password}</span>
                )}
            </div>
            
            <div>
                <input
                    name="confirmPassword"
                    type="password"
                    value={formData.confirmPassword}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    placeholder="确认密码"
                />
                {touched.confirmPassword && errors.confirmPassword && (
                    <span className="error">{errors.confirmPassword}</span>
                )}
            </div>
            
            <button type="submit">注册</button>
        </form>
    );
}

// 2. 使用useReducer管理复杂表单状态
const formReducer = (state, action) => {
    switch (action.type) {
        case 'SET_FIELD':
            return {
                ...state,
                values: {
                    ...state.values,
                    [action.name]: action.value
                }
            };
            
        case 'SET_ERROR':
            return {
                ...state,
                errors: {
                    ...state.errors,
                    [action.name]: action.error
                }
            };
            
        case 'SET_TOUCHED':
            return {
                ...state,
                touched: {
                    ...state.touched,
                    [action.name]: true
                }
            };
            
        case 'RESET':
            return action.initialState;
            
        default:
            return state;
    }
};

function AdvancedFormValidation() {
    const initialState = {
        values: { email: '', password: '' },
        errors: {},
        touched: {}
    };
    
    const [state, dispatch] = useReducer(formReducer, initialState);
    
    // 自定义Hook：字段处理
    const useField = (name) => {
        return {
            value: state.values[name] || '',
            error: state.errors[name],
            touched: state.touched[name],
            onChange: (e) => {
                dispatch({ type: 'SET_FIELD', name, value: e.target.value });
            },
            onBlur: () => {
                dispatch({ type: 'SET_TOUCHED', name });
                const error = validateField(name, state.values[name]);
                dispatch({ type: 'SET_ERROR', name, error });
            }
        };
    };
    
    const email = useField('email');
    const password = useField('password');
    
    return (
        <form>
            <input
                type="email"
                placeholder="邮箱"
                {...email}
            />
            {email.touched && email.error && <span>{email.error}</span>}
            
            <input
                type="password"
                placeholder="密码"
                {...password}
            />
            {password.touched && password.error && <span>{password.error}</span>}
        </form>
    );
}

// 3. 使用React Hook Form（推荐）
import { useForm } from 'react-hook-form';

function ReactHookFormExample() {
    const {
        register,
        handleSubmit,
        watch,
        formState: { errors, isSubmitting }
    } = useForm({
        mode: 'onChange' // 实时验证
    });
    
    const watchPassword = watch('password');
    
    const onSubmit = async (data) => {
        // 提交逻辑
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log(data);
    };
    
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input
                {...register('email', {
                    required: '邮箱不能为空',
                    pattern: {
                        value: /\S+@\S+\.\S+/,
                        message: '邮箱格式不正确'
                    }
                })}
                placeholder="邮箱"
            />
            {errors.email && <span>{errors.email.message}</span>}
            
            <input
                type="password"
                {...register('password', {
                    required: '密码不能为空',
                    minLength: {
                        value: 6,
                        message: '密码至少6位'
                    }
                })}
                placeholder="密码"
            />
            {errors.password && <span>{errors.password.message}</span>}
            
            <input
                type="password"
                {...register('confirmPassword', {
                    required: '请确认密码',
                    validate: value =>
                        value === watchPassword || '密码不一致'
                })}
                placeholder="确认密码"
            />
            {errors.confirmPassword && <span>{errors.confirmPassword.message}</span>}
            
            <button type="submit" disabled={isSubmitting}>
                {isSubmitting ? '提交中...' : '提交'}
            </button>
        </form>
    );
}

// 4. 异步验证示例
function AsyncValidationExample() {
    const [usernameStatus, setUsernameStatus] = useState('');
    
    const checkUsername = async (username) => {
        if (username.length < 3) return;
        
        setUsernameStatus('checking');
        
        try {
            const response = await fetch(`/api/check-username?username=${username}`);
            const { available } = await response.json();
            
            setUsernameStatus(available ? 'available' : 'taken');
        } catch (error) {
            setUsernameStatus('error');
        }
    };
    
    const debouncedCheck = useCallback(
        debounce(checkUsername, 500),
        []
    );
    
    return (
        <div>
            <input
                onChange={(e) => {
                    setUsernameStatus('');
                    debouncedCheck(e.target.value);
                }}
                placeholder="用户名"
            />
            {usernameStatus === 'checking' && <span>检查中...</span>}
            {usernameStatus === 'available' && <span>✓ 可用</span>}
            {usernameStatus === 'taken' && <span>✗ 已被占用</span>}
        </div>
    );
}

最佳实践：

• 提供即时的用户反馈，但避免过于频繁的验证
• 使用适当的验证时机（实时vs失焦vs提交）
• 为无障碍访问提供适当的ARIA属性
• 考虑使用成熟的表单库来处理复杂场景
• 前端验证仅用于用户体验，后端验证不可省略

In what situations should components be split?

考察点：组件设计原则。

答案：

组件拆分是React开发中的重要设计决策，遵循单一职责原则和关注点分离。合理的组件拆分能提高代码可维护性、可复用性和可测试性。拆分的时机通常基于功能复杂度、复用需求、性能考虑和团队协作等因素。

拆分时机：

1. 功能职责过多：组件承担多个不相关的功能
2. 代码量过大：单个组件超过200-300行代码
3. 复用需求：某部分逻辑需要在多处使用
4. 性能优化：避免不必要的重渲染
5. 团队协作：便于多人同时开发

代码示例：

// ❌ 拆分前：单一大组件承担过多职责
function UserProfilePage() {
    const [user, setUser] = useState(null);
    const [posts, setPosts] = useState([]);
    const [followers, setFollowers] = useState([]);
    const [isEditing, setIsEditing] = useState(false);
    const [editForm, setEditForm] = useState({});
    const [loading, setLoading] = useState(false);
    
    useEffect(() => {
        // 获取用户信息
        fetchUserData();
        fetchUserPosts();
        fetchUserFollowers();
    }, []);
    
    const fetchUserData = async () => {
        // 用户数据获取逻辑
    };
    
    const handleEditProfile = () => {
        // 编辑资料逻辑
    };
    
    const handlePostLike = (postId) => {
        // 点赞逻辑
    };
    
    const handleFollow = (userId) => {
        // 关注逻辑
    };
    
    // 200+ 行的渲染逻辑
    return (
        <div>
            {/* 用户信息展示 */}
            {/* 帖子列表 */}
            {/* 关注者列表 */}
            {/* 编辑表单 */}
        </div>
    );
}

// ✅ 拆分后：按功能职责拆分为多个组件

// 1. 用户信息组件
function UserInfo({ user, onEdit, isEditing }) {
    if (isEditing) {
        return <UserEditForm user={user} onSave={onEdit} />;
    }
    
    return (
        <div className="user-info">
            <img src={user.avatar} alt={user.name} />
            <h2>{user.name}</h2>
            <p>{user.bio}</p>
            <button onClick={() => onEdit(user)}>编辑资料</button>
        </div>
    );
}

// 2. 用户编辑表单组件
function UserEditForm({ user, onSave, onCancel }) {
    const [formData, setFormData] = useState(user);
    
    const handleSubmit = (e) => {
        e.preventDefault();
        onSave(formData);
    };
    
    return (
        <form onSubmit={handleSubmit}>
            <input
                value={formData.name}
                onChange={(e) => setFormData(prev => ({
                    ...prev,
                    name: e.target.value
                }))}
            />
            <textarea
                value={formData.bio}
                onChange={(e) => setFormData(prev => ({
                    ...prev,
                    bio: e.target.value
                }))}
            />
            <button type="submit">保存</button>
            <button type="button" onClick={onCancel}>取消</button>
        </form>
    );
}

// 3. 帖子列表组件
function PostList({ posts, onLike }) {
    return (
        <div className="post-list">
            {posts.map(post => (
                <PostItem 
                    key={post.id} 
                    post={post} 
                    onLike={onLike}
                />
            ))}
        </div>
    );
}

// 4. 单个帖子组件
function PostItem({ post, onLike }) {
    const [isLiked, setIsLiked] = useState(post.isLiked);
    const [likeCount, setLikeCount] = useState(post.likeCount);
    
    const handleLike = async () => {
        setIsLiked(!isLiked);
        setLikeCount(prev => isLiked ? prev - 1 : prev + 1);
        
        try {
            await onLike(post.id);
        } catch (error) {
            // 回滚状态
            setIsLiked(isLiked);
            setLikeCount(post.likeCount);
        }
    };
    
    return (
        <article className="post-item">
            <h3>{post.title}</h3>
            <p>{post.content}</p>
            <button 
                className={`like-btn ${isLiked ? 'liked' : ''}`}
                onClick={handleLike}
            >
                ❤️ {likeCount}
            </button>
        </article>
    );
}

// 5. 关注者列表组件
function FollowersList({ followers, onFollow }) {
    return (
        <div className="followers-list">
            <h3>关注者</h3>
            {followers.map(follower => (
                <FollowerItem 
                    key={follower.id}
                    follower={follower}
                    onFollow={onFollow}
                />
            ))}
        </div>
    );
}

// 6. 重构后的主组件
function UserProfilePage() {
    const [user, setUser] = useState(null);
    const [posts, setPosts] = useState([]);
    const [followers, setFollowers] = useState([]);
    const [isEditing, setIsEditing] = useState(false);
    
    // 自定义Hook提取数据获取逻辑
    const { loading, error } = useUserData(setUser, setPosts, setFollowers);
    
    const handleEditProfile = (userData) => {
        setUser(userData);
        setIsEditing(false);
    };
    
    const handlePostLike = async (postId) => {
        // 点赞API调用
        await likePost(postId);
    };
    
    const handleFollow = async (userId) => {
        // 关注API调用
        await followUser(userId);
    };
    
    if (loading) return <LoadingSpinner />;
    if (error) return <ErrorMessage error={error} />;
    
    return (
        <div className="user-profile-page">
            <UserInfo 
                user={user}
                onEdit={handleEditProfile}
                isEditing={isEditing}
            />
            
            <PostList 
                posts={posts}
                onLike={handlePostLike}
            />
            
            <FollowersList 
                followers={followers}
                onFollow={handleFollow}
            />
        </div>
    );
}

// 7. 自定义Hook提取逻辑
function useUserData(setUser, setPosts, setFollowers) {
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    
    useEffect(() => {
        const fetchData = async () => {
            try {
                const [userData, postsData, followersData] = await Promise.all([
                    fetchUser(),
                    fetchUserPosts(),
                    fetchUserFollowers()
                ]);
                
                setUser(userData);
                setPosts(postsData);
                setFollowers(followersData);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        };
        
        fetchData();
    }, [setUser, setPosts, setFollowers]);
    
    return { loading, error };
}

拆分原则：

• 单一职责：每个组件只负责一个明确的功能
• 合理粒度：既不过度拆分也不过度聚合
• 复用考虑：提取可复用的通用组件
• 性能平衡：避免过深的组件嵌套影响性能
• 可维护性：便于理解、测试和修改

拆分策略：

• 按业务功能拆分（用户信息、帖子列表等）
• 按UI模式拆分（表单、列表、卡片等）
• 按数据流拆分（容器组件与展示组件）
• 提取自定义Hook处理逻辑复用
• 使用组合模式而非继承

What is the difference between createRoot and render in React 18?

考察点：渲染API变化。

答案：

React 18引入了新的createRoot API来替代传统的ReactDOM.render，这个变化支持了React 18的并发特性和自动批处理。createRoot提供了更好的性能和新功能支持，而旧的render API虽然仍可使用但会进入legacy模式，无法享受React 18的新特性。

主要区别：

1. 并发特性支持：createRoot启用并发渲染，render使用legacy模式
2. 自动批处理范围：createRoot扩展批处理到所有更新，render仅限事件处理器
3. Strict Mode行为：createRoot下严格模式更严格
4. 卸载方式：createRoot使用root.unmount()，render使用ReactDOM.unmountComponentAtNode()
5. 服务端渲染：hydrateRoot替代hydrate

代码示例：

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

// ❌ React 17及之前的方式（Legacy模式）
import ReactDOM from 'react-dom';

function LegacyRendering() {
    const container = document.getElementById('root');
    
    // 旧的渲染方式
    ReactDOM.render(<App />, container);
    
    // 卸载
    ReactDOM.unmountComponentAtNode(container);
    
    // 服务端渲染水合
    ReactDOM.hydrate(<App />, container);
}

// ✅ React 18推荐方式（并发模式）
function ModernRendering() {
    const container = document.getElementById('root');
    
    // 创建root
    const root = createRoot(container);
    
    // 渲染应用
    root.render(<App />);
    
    // 卸载应用
    root.unmount();
}

// ✅ 服务端渲染的新方式
function SSRRendering() {
    const container = document.getElementById('root');
    
    // 水合应用
    const root = hydrateRoot(container, <App />);
    
    // 后续可以重新渲染
    root.render(<App newProp="value" />);
}

// 并发特性演示
function App() {
    const [count, setCount] = useState(0);
    const [items, setItems] = useState([]);
    
    // React 18的自动批处理演示
    const handleClick = () => {
        // 在createRoot中，这些更新会被自动批处理
        setCount(c => c + 1);
        setItems(prev => [...prev, `Item ${prev.length + 1}`]);
        
        // 即使在异步操作中也会批处理
        setTimeout(() => {
            setCount(c => c + 1);
            setItems(prev => [...prev, `Async Item ${prev.length + 1}`]);
        }, 100);
    };
    
    // 使用startTransition标记非紧急更新
    const [isPending, startTransition] = useTransition();
    
    const handleExpensiveUpdate = () => {
        startTransition(() => {
            // 大量计算的低优先级更新
            const newItems = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
            setItems(newItems);
        });
    };
    
    return (
        <div>
            <h1>React 18 并发特性演示</h1>
            <p>Count: {count}</p>
            <button onClick={handleClick}>触发批处理更新</button>
            <button onClick={handleExpensiveUpdate}>
                {isPending ? '更新中...' : '触发大量更新'}
            </button>
            
            <Suspense fallback={<div>Loading...</div>}>
                <ItemList items={items} />
            </Suspense>
        </div>
    );
}

// 使用useDeferredValue优化渲染
function ItemList({ items }) {
    const deferredItems = useDeferredValue(items);
    
    return (
        <ul>
            {deferredItems.slice(0, 100).map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

// 迁移指南和兼容性处理
function MigrationExample() {
    // 检测React版本并使用合适的API
    const renderApp = (App, container) => {
        if (typeof createRoot === 'function') {
            // React 18+
            const root = createRoot(container);
            root.render(<App />);
            return () => root.unmount();
        } else {
            // React 17-
            ReactDOM.render(<App />, container);
            return () => ReactDOM.unmountComponentAtNode(container);
        }
    };
    
    return { renderApp };
}

// 错误边界在新API下的使用
class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    
    static getDerivedStateFromError(error) {
        return { hasError: true };
    }
    
    componentDidCatch(error, errorInfo) {
        console.error('Error caught by boundary:', error, errorInfo);
    }
    
    render() {
        if (this.state.hasError) {
            return <h2>Something went wrong.</h2>;
        }
        
        return this.props.children;
    }
}

// 完整的应用启动示例
function startApplication() {
    const container = document.getElementById('root');
    
    if (!container) {
        throw new Error('Root container not found');
    }
    
    // 创建root并渲染应用
    const root = createRoot(container);
    
    root.render(
        <StrictMode>
            <ErrorBoundary>
                <App />
            </ErrorBoundary>
        </StrictMode>
    );
    
    // 开发环境下的热更新支持
    if (process.env.NODE_ENV === 'development' && module.hot) {
        module.hot.accept('./App', () => {
            const NextApp = require('./App').default;
            root.render(
                <StrictMode>
                    <ErrorBoundary>
                        <NextApp />
                    </ErrorBoundary>
                </StrictMode>
            );
        });
    }
    
    // 返回清理函数
    return () => {
        root.unmount();
    };
}

迁移建议：

• 新项目：直接使用createRoot API
• 现有项目：逐步迁移，可以并存使用
• 测试充分：迁移后测试Strict Mode下的双重渲染
• 性能监控：使用React DevTools观察性能改进
• 特性采用：逐步引入Suspense、startTransition等新特性

注意事项：

• createRoot启用了更严格的Strict Mode检查
• 自动批处理可能改变某些边缘情况的行为
• 服务端渲染需要使用hydrateRoot而非hydrate
• 旧API在React 18中仍可用但会显示警告

How to implement conditional styles in React?

考察点：动态样式处理。

答案：

React中实现条件样式有多种方法，包括内联样式、CSS类名切换、CSS-in-JS库、CSS模块等。选择合适的方法取决于项目需求、团队偏好和性能考虑。最常用的是通过条件逻辑动态设置className或style属性。

实现方法：

1. 条件className：根据状态切换CSS类名
2. 内联样式：直接在style属性中设置条件样式
3. CSS-in-JS：使用styled-components等库
4. CSS模块：结合CSS Modules使用
5. 工具库辅助：使用classnames等工具库

代码示例：

import { useState } from 'react';
import classNames from 'classnames';
import styled from 'styled-components';

// 1. 基础条件样式实现
function BasicConditionalStyles() {
    const [isActive, setIsActive] = useState(false);
    const [theme, setTheme] = useState('light');
    const [status, setStatus] = useState('default'); // 'default', 'success', 'error'
    
    return (
        <div>
            {/* 方法1: 三元运算符设置className */}
            <button 
                className={isActive ? 'btn btn-active' : 'btn btn-inactive'}
                onClick={() => setIsActive(!isActive)}
            >
                {isActive ? '激活' : '未激活'}
            </button>
            
            {/* 方法2: 模板字符串拼接 */}
            <div className={`container theme-${theme} ${isActive ? 'active' : ''}`}>
                <p>当前主题: {theme}</p>
            </div>
            
            {/* 方法3: 内联样式条件设置 */}
            <div 
                style={{
                    backgroundColor: isActive ? '#007bff' : '#6c757d',
                    color: isActive ? 'white' : 'black',
                    padding: '10px',
                    borderRadius: isActive ? '8px' : '0px',
                    transition: 'all 0.3s ease'
                }}
            >
                动态内联样式
            </div>
            
            {/* 方法4: 对象形式的条件className */}
            <div 
                className={classNames('card', {
                    'card-active': isActive,
                    'card-success': status === 'success',
                    'card-error': status === 'error',
                    [`theme-${theme}`]: true
                })}
            >
                使用classNames库
            </div>
        </div>
    );
}

// 2. 高级条件样式模式
function AdvancedConditionalStyles() {
    const [loading, setLoading] = useState(false);
    const [progress, setProgress] = useState(0);
    const [size, setSize] = useState('medium'); // 'small', 'medium', 'large'
    
    // CSS变量动态设置
    const dynamicStyles = {
        '--progress': `${progress}%`,
        '--button-size': size === 'small' ? '32px' : size === 'large' ? '56px' : '40px'
    };
    
    return (
        <div style={dynamicStyles}>
            {/* 进度条样式 */}
            <div className="progress-container">
                <div 
                    className="progress-bar"
                    style={{ width: `${progress}%` }}
                />
            </div>
            
            {/* 复合条件样式 */}
            <button 
                className={classNames('btn', {
                    'btn-loading': loading,
                    'btn-small': size === 'small',
                    'btn-large': size === 'large',
                    'btn-disabled': progress === 100
                })}
                disabled={loading || progress === 100}
                onClick={() => setLoading(!loading)}
            >
                {loading ? (
                    <>
                        <span className="spinner" />
                        加载中...
                    </>
                ) : (
                    '点击按钮'
                )}
            </button>
        </div>
    );
}

// 3. CSS-in-JS实现（styled-components）
const StyledButton = styled.button`
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* 条件样式通过props */
    background-color: ${props => 
        props.$variant === 'primary' ? '#007bff' : 
        props.$variant === 'danger' ? '#dc3545' : 
        '#6c757d'
    };
    
    color: ${props => props.$variant ? 'white' : 'black'};
    
    /* 状态样式 */
    opacity: ${props => props.disabled ? 0.6 : 1};
    transform: ${props => props.$isPressed ? 'scale(0.95)' : 'scale(1)'};
    
    /* 尺寸变体 */
    ${props => props.$size === 'large' && `
        padding: 16px 32px;
        font-size: 18px;
    `}
    
    ${props => props.$size === 'small' && `
        padding: 8px 16px;
        font-size: 14px;
    `}
    
    /* 悬停效果 */
    &:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
`;

function StyledComponentExample() {
    const [variant, setVariant] = useState('primary');
    const [size, setSize] = useState('medium');
    const [isPressed, setIsPressed] = useState(false);
    
    return (
        <div>
            <StyledButton
                $variant={variant}
                $size={size}
                $isPressed={isPressed}
                onMouseDown={() => setIsPressed(true)}
                onMouseUp={() => setIsPressed(false)}
                onMouseLeave={() => setIsPressed(false)}
            >
                Styled Button
            </StyledButton>
            
            <div>
                <select onChange={(e) => setVariant(e.target.value)}>
                    <option value="primary">Primary</option>
                    <option value="danger">Danger</option>
                    <option value="default">Default</option>
                </select>
            </div>
        </div>
    );
}

// 4. CSS模块化条件样式
import styles from './Component.module.css';

function CSSModulesExample() {
    const [status, setStatus] = useState('idle'); // 'idle', 'loading', 'success', 'error'
    
    return (
        <div className={styles.container}>
            <div 
                className={classNames(styles.card, {
                    [styles.loading]: status === 'loading',
                    [styles.success]: status === 'success',
                    [styles.error]: status === 'error'
                })}
            >
                <h3 className={styles.title}>状态卡片</h3>
                <p className={styles.content}>当前状态: {status}</p>
            </div>
        </div>
    );
}

// 5. 响应式条件样式Hook
function useResponsiveStyles() {
    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
    
    useEffect(() => {
        const handleResize = () => setWindowWidth(window.innerWidth);
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    
    const getResponsiveStyles = (mobileStyle, tabletStyle, desktopStyle) => {
        if (windowWidth < 768) return mobileStyle;
        if (windowWidth < 1024) return tabletStyle;
        return desktopStyle;
    };
    
    return { windowWidth, getResponsiveStyles };
}

function ResponsiveComponent() {
    const { getResponsiveStyles } = useResponsiveStyles();
    
    return (
        <div 
            style={getResponsiveStyles(
                { fontSize: '14px', padding: '8px' },    // mobile
                { fontSize: '16px', padding: '12px' },   // tablet  
                { fontSize: '18px', padding: '16px' }    // desktop
            )}
        >
            响应式组件
        </div>
    );
}

// 6. 主题系统实现
const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState('light');
    
    const themeStyles = {
        light: {
            background: '#ffffff',
            color: '#333333',
            border: '#e0e0e0'
        },
        dark: {
            background: '#1a1a1a',
            color: '#ffffff', 
            border: '#333333'
        }
    };
    
    return (
        <div 
            className={`theme-${theme}`}
            style={themeStyles[theme]}
            data-theme={theme}
        >
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
                切换主题
            </button>
            {children}
        </div>
    );
};

CSS文件示例：

/* Component.module.css */
.container {
    padding: 20px;
}

.card {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.card.loading {
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.card.success {
    background-color: #d4edda;
    border-color: #00b894;
}

.card.error {
    background-color: #f8d7da;
    border-color: #e74c3c;
}

/* 全局主题样式 */
.theme-light {
    --bg-primary: #ffffff;
    --text-primary: #333333;
}

.theme-dark {
    --bg-primary: #1a1a1a;
    --text-primary: #ffffff;
}

最佳实践：

• 优先使用CSS类名切换而非内联样式
• 使用CSS变量实现主题切换
• 利用classnames库简化复杂的条件逻辑
• 考虑性能影响，避免在每次渲染时创建新的样式对象
• 保持样式逻辑的可维护性和可读性

How does React 18’s concurrent rendering optimize user experience?

考察点：并发渲染价值。

答案：

React 18的并发渲染通过时间切片和优先级调度，使React能够中断低优先级的渲染工作来处理更紧急的用户交互，从而保持应用的响应性。这种机制让用户界面在处理大量计算时仍能保持流畅，显著提升了用户体验。

优化机制：

1. 时间切片：将长时间的渲染工作分割成小块，避免阻塞主线程
2. 优先级调度：紧急更新（用户输入）优先于非紧急更新（数据获取）
3. 可中断渲染：高优先级任务可以中断低优先级渲染
4. 并发特性：多个状态更新可以同时准备，但按优先级提交
5. 智能批处理：自动合并更新减少重渲染次数

代码示例：

import { 
    useState, 
    useTransition, 
    useDeferredValue, 
    startTransition,
    Suspense,
    memo
} from 'react';

// 1. 基础并发渲染演示
function ConcurrentRenderingDemo() {
    const [query, setQuery] = useState('');
    const [results, setResults] = useState([]);
    const [isPending, startTransition] = useTransition();
    
    // 紧急更新：用户输入，立即响应
    const handleInputChange = (e) => {
        setQuery(e.target.value);
        
        // 非紧急更新：搜索结果，可以被中断
        startTransition(() => {
            const searchResults = performExpensiveSearch(e.target.value);
            setResults(searchResults);
        });
    };
    
    return (
        <div>
            <input
                value={query}
                onChange={handleInputChange}
                placeholder="实时搜索..."
                className={isPending ? 'input-pending' : ''}
            />
            
            <div className="search-status">
                {isPending ? '搜索中...' : `找到 ${results.length} 个结果`}
            </div>
            
            <SearchResults results={results} />
        </div>
    );
}

// 2. useDeferredValue优化大列表渲染
function DeferredListExample() {
    const [filter, setFilter] = useState('');
    const [items] = useState(generateLargeItemList(10000));
    
    // 延迟值，不会阻塞用户输入
    const deferredFilter = useDeferredValue(filter);
    
    // 基于延迟值进行昂贵的过滤操作
    const filteredItems = useMemo(() => {
        return items.filter(item => 
            item.name.toLowerCase().includes(deferredFilter.toLowerCase())
        );
    }, [items, deferredFilter]);
    
    const isStale = filter !== deferredFilter;
    
    return (
        <div>
            <input
                value={filter}
                onChange={(e) => setFilter(e.target.value)}
                placeholder="过滤大列表..."
            />
            
            <div style={{ opacity: isStale ? 0.5 : 1, transition: 'opacity 0.2s' }}>
                <VirtualizedList items={filteredItems} />
            </div>
        </div>
    );
}

// 3. 复杂交互场景优化
function ComplexInteractionExample() {
    const [selectedTab, setSelectedTab] = useState('dashboard');
    const [dashboardData, setDashboardData] = useState(null);
    const [analyticsData, setAnalyticsData] = useState(null);
    const [isPending, startTransition] = useTransition();
    
    // 标签切换：立即更新UI，异步加载数据
    const handleTabSwitch = (tabName) => {
        setSelectedTab(tabName); // 立即更新，保证UI响应
        
        startTransition(() => {
            // 异步数据加载，不阻塞标签切换
            loadTabData(tabName).then(data => {
                if (tabName === 'dashboard') {
                    setDashboardData(data);
                } else if (tabName === 'analytics') {
                    setAnalyticsData(data);
                }
            });
        });
    };
    
    return (
        <div>
            <div className="tab-nav">
                {['dashboard', 'analytics', 'settings'].map(tab => (
                    <button
                        key={tab}
                        className={`tab ${selectedTab === tab ? 'active' : ''}`}
                        onClick={() => handleTabSwitch(tab)}
                    >
                        {tab}
                        {isPending && selectedTab === tab && (
                            <span className="loading-indicator">⟳</span>
                        )}
                    </button>
                ))}
            </div>
            
            <div className="tab-content">
                <Suspense fallback={<TabContentSkeleton />}>
                    {selectedTab === 'dashboard' && (
                        <Dashboard data={dashboardData} />
                    )}
                    {selectedTab === 'analytics' && (
                        <Analytics data={analyticsData} />
                    )}
                    {selectedTab === 'settings' && (
                        <Settings />
                    )}
                </Suspense>
            </div>
        </div>
    );
}

// 4. 渐进式加载优化
function ProgressiveLoadingExample() {
    const [posts, setPosts] = useState([]);
    const [page, setPage] = useState(1);
    const [isPending, startTransition] = useTransition();
    
    const loadMorePosts = () => {
        startTransition(() => {
            fetchPosts(page + 1).then(newPosts => {
                setPosts(prevPosts => [...prevPosts, ...newPosts]);
                setPage(prev => prev + 1);
            });
        });
    };
    
    return (
        <div>
            <PostList posts={posts} />
            
            <button 
                onClick={loadMorePosts}
                disabled={isPending}
                className="load-more-btn"
            >
                {isPending ? '加载中...' : '加载更多'}
            </button>
            
            {isPending && (
                <div className="loading-overlay">
                    <PostSkeleton count={3} />
                </div>
            )}
        </div>
    );
}

// 5. 性能监控和调试
function PerformanceMonitoringExample() {
    const [heavyData, setHeavyData] = useState([]);
    const [isPending, startTransition] = useTransition();
    
    const handleHeavyOperation = () => {
        console.time('Heavy Operation');
        
        startTransition(() => {
            // 模拟CPU密集型操作
            const result = performHeavyCalculation();
            setHeavyData(result);
            console.timeEnd('Heavy Operation');
        });
    };
    
    // 使用React DevTools Profiler监控
    useEffect(() => {
        if (window.performance && window.performance.mark) {
            window.performance.mark('heavy-operation-start');
        }
        
        return () => {
            if (window.performance && window.performance.mark) {
                window.performance.mark('heavy-operation-end');
                window.performance.measure(
                    'heavy-operation',
                    'heavy-operation-start',
                    'heavy-operation-end'
                );
            }
        };
    }, [heavyData]);
    
    return (
        <div>
            <button onClick={handleHeavyOperation}>
                执行重计算 {isPending && '(处理中...)'}
            </button>
            
            <HeavyDataVisualization data={heavyData} />
        </div>
    );
}

// 6. 优化组件渲染
const SearchResults = memo(({ results }) => {
    return (
        <div className="results">
            {results.map(result => (
                <SearchResultItem key={result.id} result={result} />
            ))}
        </div>
    );
});

const SearchResultItem = memo(({ result }) => {
    return (
        <div className="result-item">
            <h3>{result.title}</h3>
            <p>{result.description}</p>
        </div>
    );
});

// 辅助函数
function performExpensiveSearch(query) {
    // 模拟昂贵的搜索操作
    const items = Array.from({ length: 1000 }, (_, i) => ({
        id: i,
        title: `Item ${i}`,
        description: `Description for item ${i}`
    }));
    
    return items.filter(item => 
        item.title.toLowerCase().includes(query.toLowerCase())
    );
}

function generateLargeItemList(count) {
    return Array.from({ length: count }, (_, i) => ({
        id: i,
        name: `Item ${i}`,
        category: `Category ${i % 10}`
    }));
}

async function loadTabData(tabName) {
    // 模拟异步数据加载
    await new Promise(resolve => setTimeout(resolve, 1000));
    return { tabName, data: `Data for ${tabName}` };
}

用户体验提升：

1. 输入响应性：用户输入立即反映在UI上，不被后台计算阻塞
2. 流畅动画：动画和过渡效果不会因为重渲染而卡顿
3. 渐进式加载：内容逐步显示，而不是长时间的白屏等待
4. 智能优先级：重要交互优先处理，提升感知性能
5. 更好的加载体验：通过Suspense和transition提供更好的加载反馈

最佳实践：

• 使用startTransition包装非紧急的状态更新
• 结合useDeferredValue优化搜索和过滤场景
• 适当使用Suspense提供加载状态
• 通过React DevTools Profiler监控性能
• 避免过度使用并发特性，保持代码简洁

What are the use cases and considerations for useMemo and useCallback?

考察点：性能优化策略。

答案：

useMemo和useCallback是React中的性能优化Hook，用于避免不必要的计算和重新渲染。useMemo缓存计算结果，useCallback缓存函数引用。正确使用它们可以显著提升应用性能，但过度使用反而可能造成性能负担。

使用场景对比：

useMemo使用场景：

1. 昂贵计算缓存：避免每次渲染重复执行复杂计算
2. 对象/数组引用稳定：防止因引用变化导致的子组件重渲染
3. 依赖项优化：作为其他Hook的依赖项时保持稳定
4. 列表过滤/排序：缓存大列表的处理结果

useCallback使用场景：

1. 子组件props优化：传递给React.memo组件的函数保持稳定
2. Effect依赖优化：作为useEffect依赖时避免无限循环
3. 事件处理器缓存：频繁传递的事件处理函数
4. 自定义Hook：Hook内部函数的稳定引用

代码示例：

import { useState, useMemo, useCallback, memo, useEffect } from 'react';

// 1. useMemo基础用法演示
function UseMemoExample() {
    const [count, setCount] = useState(0);
    const [items, setItems] = useState([]);
    const [filter, setFilter] = useState('');
    
    // ❌ 错误：简单计算不需要useMemo
    const simpleValue = useMemo(() => count * 2, [count]); // 过度优化
    
    // ✅ 正确：昂贵计算使用useMemo
    const expensiveValue = useMemo(() => {
        console.log('执行昂贵计算...');
        let result = 0;
        for (let i = 0; i < count * 1000000; i++) {
            result += Math.random();
        }
        return result;
    }, [count]);
    
    // ✅ 正确：列表过滤缓存
    const filteredItems = useMemo(() => {
        console.log('过滤列表...');
        return items.filter(item => 
            item.name.toLowerCase().includes(filter.toLowerCase())
        );
    }, [items, filter]);
    
    // ✅ 正确：对象引用稳定化
    const chartConfig = useMemo(() => ({
        type: 'line',
        data: filteredItems,
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top' }
            }
        }
    }), [filteredItems]);
    
    return (
        <div>
            <input 
                value={filter}
                onChange={(e) => setFilter(e.target.value)}
                placeholder="过滤项目..."
            />
            <p>昂贵计算结果: {expensiveValue.toFixed(2)}</p>
            <Chart config={chartConfig} />
            <ItemList items={filteredItems} />
        </div>
    );
}

// 2. useCallback基础用法演示
function UseCallbackExample() {
    const [count, setCount] = useState(0);
    const [users, setUsers] = useState([]);
    
    // ❌ 错误：每次渲染都创建新函数
    const handleClick = () => {
        setCount(count + 1);
    };
    
    // ✅ 正确：使用useCallback缓存函数
    const handleIncrement = useCallback(() => {
        setCount(prevCount => prevCount + 1);
    }, []); // 空依赖数组，函数永远不变
    
    // ✅ 正确：带依赖的useCallback
    const handleUserAction = useCallback((userId, action) => {
        console.log(`User ${userId} performed ${action}`);
        // 根据当前用户列表执行操作
        setUsers(prevUsers => 
            prevUsers.map(user => 
                user.id === userId 
                    ? { ...user, lastAction: action }
                    : user
            )
        );
    }, []);
    
    // ✅ 正确：复杂依赖的useCallback
    const handleSearch = useCallback(async (query) => {
        const results = await searchUsers(query);
        setUsers(results);
    }, []); // 不依赖外部变量
    
    return (
        <div>
            <button onClick={handleIncrement}>
                Count: {count}
            </button>
            
            <UserList 
                users={users}
                onUserAction={handleUserAction}
                onSearch={handleSearch}
            />
        </div>
    );
}

// 3. 组合使用示例
function OptimizedComponent() {
    const [data, setData] = useState([]);
    const [sortBy, setSortBy] = useState('name');
    const [searchTerm, setSearchTerm] = useState('');
    
    // 搜索和排序的复合操作
    const processedData = useMemo(() => {
        let result = data.filter(item =>
            item.name.toLowerCase().includes(searchTerm.toLowerCase())
        );
        
        result.sort((a, b) => {
            if (sortBy === 'name') return a.name.localeCompare(b.name);
            if (sortBy === 'date') return new Date(b.date) - new Date(a.date);
            return 0;
        });
        
        return result;
    }, [data, searchTerm, sortBy]);
    
    // 缓存事件处理器
    const handleSort = useCallback((newSortBy) => {
        setSortBy(newSortBy);
    }, []);
    
    const handleSearch = useCallback((term) => {
        setSearchTerm(term);
    }, []);
    
    const handleItemClick = useCallback((item) => {
        console.log('Clicked item:', item);
    }, []);
    
    return (
        <div>
            <SearchBar onSearch={handleSearch} />
            <SortControls sortBy={sortBy} onSort={handleSort} />
            <DataTable 
                data={processedData}
                onItemClick={handleItemClick}
            />
        </div>
    );
}

// 4. 性能对比演示
function PerformanceComparison() {
    const [count, setCount] = useState(0);
    const [items, setItems] = useState(Array.from({length: 1000}, (_, i) => ({
        id: i,
        name: `Item ${i}`,
        value: Math.random()
    })));
    
    // 未优化版本
    const UnoptimizedChild = ({ items, onItemClick }) => {
        console.log('UnoptimizedChild rendered');
        return (
            <div>
                {items.slice(0, 10).map(item => (
                    <div key={item.id} onClick={() => onItemClick(item)}>
                        {item.name}
                    </div>
                ))}
            </div>
        );
    };
    
    // 优化版本
    const OptimizedChild = memo(({ items, onItemClick }) => {
        console.log('OptimizedChild rendered');
        return (
            <div>
                {items.slice(0, 10).map(item => (
                    <div key={item.id} onClick={() => onItemClick(item)}>
                        {item.name}
                    </div>
                ))}
            </div>
        );
    });
    
    // 未缓存的处理函数
    const handleItemClickUncached = (item) => {
        console.log('Clicked:', item.name);
    };
    
    // 缓存的处理函数
    const handleItemClickCached = useCallback((item) => {
        console.log('Clicked:', item.name);
    }, []);
    
    return (
        <div>
            <button onClick={() => setCount(c => c + 1)}>
                Count: {count}
            </button>
            
            <h3>未优化（每次都重新渲染）:</h3>
            <UnoptimizedChild 
                items={items}
                onItemClick={handleItemClickUncached}
            />
            
            <h3>已优化（仅在items变化时重新渲染）:</h3>
            <OptimizedChild 
                items={items}
                onItemClick={handleItemClickCached}
            />
        </div>
    );
}

// 5. 自定义Hook中的优化
function useOptimizedData(initialData) {
    const [data, setData] = useState(initialData);
    const [loading, setLoading] = useState(false);
    
    // 缓存数据获取函数
    const fetchData = useCallback(async (params) => {
        setLoading(true);
        try {
            const result = await apiCall(params);
            setData(result);
        } finally {
            setLoading(false);
        }
    }, []);
    
    // 缓存数据处理函数
    const processData = useCallback((processor) => {
        setData(prevData => processor(prevData));
    }, []);
    
    // 缓存返回对象
    return useMemo(() => ({
        data,
        loading,
        fetchData,
        processData
    }), [data, loading, fetchData, processData]);
}

// 6. 常见陷阱和解决方案
function CommonPitfalls() {
    const [count, setCount] = useState(0);
    
    // ❌ 陷阱1：依赖项不完整
    const incorrectMemo = useMemo(() => {
        return someExpensiveOperation(count);
    }, []); // 缺少count依赖
    
    // ✅ 修正：包含所有依赖项
    const correctMemo = useMemo(() => {
        return someExpensiveOperation(count);
    }, [count]);
    
    // ❌ 陷阱2：依赖项过多导致频繁更新
    const overDependentMemo = useMemo(() => {
        return simpleOperation();
    }, [count, /* 其他很多依赖 */]);
    
    // ✅ 修正：拆分或重构减少依赖
    const betterMemo = useMemo(() => {
        return simpleOperation();
    }, []); // 如果真的不依赖外部状态
    
    // ❌ 陷阱3：在依赖数组中使用对象
    const config = { threshold: 10 };
    const problematicCallback = useCallback(() => {
        processWithConfig(config);
    }, [config]); // config每次都是新对象
    
    // ✅ 修正：使用稳定的引用或拆解依赖
    const threshold = 10;
    const fixedCallback = useCallback(() => {
        processWithConfig({ threshold });
    }, [threshold]);
    
    return null;
}

注意事项和最佳实践：

何时使用：

• 计算成本高的操作
• 作为其他Hook的依赖项
• 传递给React.memo组件的props
• 需要引用稳定性的场景

何时不用：

• 简单的基本类型计算
• 组件很少重新渲染
• 依赖项经常变化
• 计算成本低于缓存成本

性能考虑：

• useMemo和useCallback本身有开销
• 依赖项比较使用Object.is()
• 缓存可能导致内存占用增加
• 过度优化可能适得其反

When to use startTransition? What is its working principle?

考察点：优先级调度。

答案：

startTransition是React 18引入的并发特性API，用于标记非紧急的状态更新，让React能够优先处理用户交互等紧急更新。它通过降低更新优先级来避免阻塞关键的用户交互，实现更流畅的用户体验。

使用场景：

1. 搜索结果更新：用户输入时的搜索结果渲染
2. 数据可视化：大量数据的图表重绘
3. 列表过滤排序：大列表的筛选和排序操作
4. 路由切换：页面切换时的内容加载
5. 后台数据同步：不影响用户交互的数据更新

工作原理：
startTransition将更新标记为"transition"，React会以较低优先级处理这些更新，当有紧急更新（如用户输入）时，会暂停transition更新，优先处理紧急任务，确保UI响应性。

代码示例：

import { useState, startTransition, useTransition } from 'react';

// 1. 基础使用 - 搜索场景优化
function SearchExample() {
    const [query, setQuery] = useState('');
    const [results, setResults] = useState([]);
    const [isPending, startTransition] = useTransition();
    
    const handleInputChange = (e) => {
        const value = e.target.value;
        
        // 紧急更新：立即更新输入框显示
        setQuery(value);
        
        // 非紧急更新：搜索结果可以延后
        startTransition(() => {
            // 这个更新可以被中断，不会阻塞输入
            const searchResults = performSearch(value);
            setResults(searchResults);
        });
    };
    
    return (
        <div>
            <input
                value={query}
                onChange={handleInputChange}
                placeholder="搜索..."
            />
            
            {isPending && <div className="search-loading">搜索中...</div>}
            
            <SearchResults results={results} />
        </div>
    );
}

// 2. 复杂数据处理场景
function DataVisualizationExample() {
    const [rawData, setRawData] = useState([]);
    const [chartType, setChartType] = useState('line');
    const [processedData, setProcessedData] = useState([]);
    const [isPending, startTransition] = useTransition();
    
    const handleDataUpdate = (newData) => {
        // 立即更新原始数据状态
        setRawData(newData);
        
        // 数据处理和图表更新使用transition
        startTransition(() => {
            const processed = processDataForChart(newData, chartType);
            setProcessedData(processed);
        });
    };
    
    const handleChartTypeChange = (newType) => {
        // 立即更新图表类型选择
        setChartType(newType);
        
        // 重新处理数据使用transition
        startTransition(() => {
            const processed = processDataForChart(rawData, newType);
            setProcessedData(processed);
        });
    };
    
    return (
        <div>
            <div className="chart-controls">
                <select 
                    value={chartType} 
                    onChange={(e) => handleChartTypeChange(e.target.value)}
                >
                    <option value="line">折线图</option>
                    <option value="bar">柱状图</option>
                    <option value="pie">饼图</option>
                </select>
                
                {isPending && <span className="processing">处理中...</span>}
            </div>
            
            <Chart 
                data={processedData} 
                type={chartType}
                loading={isPending}
            />
        </div>
    );
}

// 3. 列表管理优化
function ListManagementExample() {
    const [items, setItems] = useState(generateLargeList(10000));
    const [filter, setFilter] = useState('');
    const [sortBy, setSortBy] = useState('name');
    const [displayItems, setDisplayItems] = useState(items);
    const [isPending, startTransition] = useTransition();
    
    // 过滤和排序的复合操作
    const updateDisplayItems = (newFilter, newSortBy) => {
        startTransition(() => {
            let result = items;
            
            // 应用过滤
            if (newFilter) {
                result = result.filter(item =>
                    item.name.toLowerCase().includes(newFilter.toLowerCase())
                );
            }
            
            // 应用排序
            result.sort((a, b) => {
                if (newSortBy === 'name') return a.name.localeCompare(b.name);
                if (newSortBy === 'date') return new Date(b.date) - new Date(a.date);
                if (newSortBy === 'popularity') return b.popularity - a.popularity;
                return 0;
            });
            
            setDisplayItems(result);
        });
    };
    
    const handleFilterChange = (e) => {
        const newFilter = e.target.value;
        setFilter(newFilter);
        updateDisplayItems(newFilter, sortBy);
    };
    
    const handleSortChange = (newSortBy) => {
        setSortBy(newSortBy);
        updateDisplayItems(filter, newSortBy);
    };
    
    return (
        <div>
            <div className="list-controls">
                <input
                    value={filter}
                    onChange={handleFilterChange}
                    placeholder="过滤项目..."
                />
                
                <select value={sortBy} onChange={(e) => handleSortChange(e.target.value)}>
                    <option value="name">按名称排序</option>
                    <option value="date">按日期排序</option>
                    <option value="popularity">按热度排序</option>
                </select>
                
                {isPending && <div className="list-loading">更新中...</div>}
            </div>
            
            <VirtualizedList 
                items={displayItems}
                loading={isPending}
            />
        </div>
    );
}

// 4. 路由切换优化
function RouterTransitionExample() {
    const [currentPage, setCurrentPage] = useState('home');
    const [pageData, setPageData] = useState(null);
    const [isPending, startTransition] = useTransition();
    
    const navigateToPage = (pageName) => {
        // 立即更新当前页面状态（URL变化）
        setCurrentPage(pageName);
        
        // 页面数据加载使用transition
        startTransition(() => {
            loadPageData(pageName).then(data => {
                setPageData(data);
            });
        });
    };
    
    return (
        <div>
            <nav className="navigation">
                {['home', 'about', 'products', 'contact'].map(page => (
                    <button
                        key={page}
                        className={currentPage === page ? 'active' : ''}
                        onClick={() => navigateToPage(page)}
                    >
                        {page}
                        {isPending && currentPage === page && ' ⟳'}
                    </button>
                ))}
            </nav>
            
            <main className="page-content">
                {isPending ? (
                    <PageSkeleton />
                ) : (
                    <PageComponent page={currentPage} data={pageData} />
                )}
            </main>
        </div>
    );
}

// 5. 优雅降级和错误处理
function TransitionWithFallback() {
    const [data, setData] = useState([]);
    const [query, setQuery] = useState('');
    const [isPending, startTransition] = useTransition();
    const [error, setError] = useState(null);
    
    const handleSearch = (searchQuery) => {
        setQuery(searchQuery);
        setError(null);
        
        startTransition(() => {
            try {
                // 可能失败的异步操作
                performAsyncSearch(searchQuery)
                    .then(results => {
                        setData(results);
                    })
                    .catch(err => {
                        setError(err);
                        // 降级到之前的数据或空状态
                        setData([]);
                    });
            } catch (err) {
                setError(err);
            }
        });
    };
    
    return (
        <div>
            <SearchInput onSearch={handleSearch} />
            
            {error && (
                <div className="error-message">
                    搜索失败: {error.message}
                </div>
            )}
            
            {isPending && (
                <div className="search-pending">
                    正在搜索 "{query}"...
                </div>
            )}
            
            <SearchResults data={data} />
        </div>
    );
}

// 6. 性能监控和调试
function TransitionPerformanceExample() {
    const [items, setItems] = useState([]);
    const [isPending, startTransition] = useTransition();
    
    const handleExpensiveOperation = () => {
        console.time('Expensive Operation');
        
        startTransition(() => {
            // 模拟CPU密集型操作
            const processedItems = performExpensiveProcessing();
            setItems(processedItems);
            
            console.timeEnd('Expensive Operation');
            
            // 使用Performance API记录
            if (window.performance && window.performance.mark) {
                window.performance.mark('transition-complete');
            }
        });
    };
    
    // 监控transition状态变化
    useEffect(() => {
        if (isPending) {
            console.log('Transition started');
        } else {
            console.log('Transition completed');
        }
    }, [isPending]);
    
    return (
        <div>
            <button onClick={handleExpensiveOperation}>
                执行昂贵操作 {isPending && '(进行中...)'}
            </button>
            
            <ItemGrid items={items} />
        </div>
    );
}

// 辅助函数
function performSearch(query) {
    // 模拟搜索操作
    return Array.from({ length: 1000 }, (_, i) => ({
        id: i,
        title: `Result ${i}`,
        matches: Math.random() > 0.5
    })).filter(item => item.title.includes(query));
}

function processDataForChart(data, chartType) {
    // 模拟数据处理
    console.log(`Processing data for ${chartType} chart`);
    return data.map(item => ({
        ...item,
        processed: true,
        chartType
    }));
}

async function loadPageData(pageName) {
    // 模拟异步数据加载
    await new Promise(resolve => setTimeout(resolve, 1000));
    return { page: pageName, content: `Content for ${pageName}` };
}

使用原则：

• 区分更新优先级：紧急的用户交互立即处理，数据更新使用transition
• 保持UI响应性：确保关键交互（输入、点击）不被阻塞
• 合理使用isPending：提供适当的加载状态反馈
• 错误处理：transition内的错误需要适当处理
• 性能监控：使用React DevTools观察transition效果

注意事项：

• startTransition不会阻塞紧急更新
• transition更新可能被中断和重新开始
• 不是所有更新都适合使用transition
• 过度使用可能导致用户界面延迟感知

How does Suspense’s fallback mechanism handle async components?

考察点：异步边界处理。

答案：

Suspense的fallback机制是React处理异步组件加载的核心特性，它通过捕获Promise抛出来识别异步操作，在异步内容加载期间显示fallback UI，加载完成后自动切换到实际内容。这种机制让开发者能够优雅地处理代码分割、数据获取等异步场景，提供更好的用户体验。

工作原理：

1. Promise捕获：当组件树中抛出Promise时，Suspense边界捕获并进入pending状态
2. fallback渲染：显示fallback属性指定的加载UI组件
3. 异步等待：等待Promise resolve，期间保持fallback显示
4. 内容切换：Promise完成后，重新渲染实际的异步组件内容
5. 错误处理：结合ErrorBoundary处理加载失败的情况

主要应用场景：

1. 代码分割加载：

   import { lazy, Suspense } from 'react';
   
   const LazyComponent = lazy(() => import('./HeavyComponent'));
   
   function App() {
       return (
           <Suspense fallback={<div>加载中...</div>}>
               <LazyComponent />
           </Suspense>
       );
   }
   

2. 数据获取场景：

   function ProfilePage({ userId }) {
       return (
           <Suspense fallback={<ProfileSkeleton />}>
               <ProfileDetails userId={userId} />
               <Suspense fallback={<PostsLoading />}>
                   <ProfileTimeline userId={userId} />
               </Suspense>
           </Suspense>
       );
   }
   

3. 嵌套Suspense边界：

   function AppLayout() {
       return (
           <Suspense fallback={<AppSkeleton />}>
               <Header />
               <Suspense fallback={<ContentSkeleton />}>
                   <MainContent />
                   <Suspense fallback={<SidebarSkeleton />}>
                       <Sidebar />
                   </Suspense>
               </Suspense>
           </Suspense>
       );
   }
   

最佳实践：

• 合理设置Suspense边界粒度，避免过度或不足的加载状态
• 为不同类型内容提供专门的fallback UI（骨架屏、占位符等）
• 结合ErrorBoundary处理加载失败场景
• 使用嵌套Suspense实现渐进式加载体验
• 避免fallback组件过于复杂，影响加载性能

What problems does useId solve in SSR scenarios?

考察点：服务端渲染兼容。

答案：

useId是React 18引入的Hook，专门用于生成稳定的唯一标识符，主要解决SSR场景下客户端与服务端ID不一致导致的hydration错误问题。它确保服务端渲染和客户端hydration过程中使用相同的ID，避免因随机ID导致的DOM结构不匹配。

核心问题解决：

1. Hydration ID不匹配：

   // 问题代码 - 每次渲染生成不同ID
   function BadExample() {
       const id = Math.random().toString(36); // 服务端和客户端不一致
       return <input id={id} />;
   }
   
   // 解决方案 - 使用useId
   function GoodExample() {
       const id = useId(); // 服务端和客户端保持一致
       return <input id={id} />;
   }
   

2. 表单标签关联：

   function FormField({ label, children }) {
       const id = useId();
       return (
           <div>
               <label htmlFor={id}>{label}</label>
               {React.cloneElement(children, { id })}
           </div>
       );
   }
   

使用场景：

1. 无障碍性支持：

   function AccessibleInput({ label, description }) {
       const inputId = useId();
       const descriptionId = useId();
       
       return (
           <div>
               <label htmlFor={inputId}>{label}</label>
               <input 
                   id={inputId}
                   aria-describedby={descriptionId}
               />
               <p id={descriptionId}>{description}</p>
           </div>
       );
   }
   

2. 组件库开发：

   function Modal({ children }) {
       const titleId = useId();
       const descriptionId = useId();
       
       return (
           <div 
               role="dialog"
               aria-labelledby={titleId}
               aria-describedby={descriptionId}
           >
               <h2 id={titleId}>标题</h2>
               <div id={descriptionId}>{children}</div>
           </div>
       );
   }
   

与传统方案对比：

• 传统方案：使用Math.random()、Date.now()等在SSR场景下会产生不一致的ID
• useId优势：确保服务端和客户端生成相同的ID序列，避免hydration错误
• 性能优化：避免因ID不匹配导致的DOM重建和重新渲染

最佳实践：

• 仅在需要唯一标识符时使用useId，不要用作React key
• 可以添加前缀或后缀来创建相关的多个ID
• 在组件库中广泛使用以确保无障碍性和SSR兼容性
• 避免将useId的返回值用于其他用途（如数组索引、状态键等）

What impact does React 18’s automatic batching have on performance?

考察点：批处理性能优化。

答案：

React 18的自动批处理显著提升了应用性能，通过将多个状态更新合并为单次渲染来减少不必要的重渲染次数。相比React 17只在事件处理器中批处理，React 18扩展到Promise、setTimeout等异步操作中，实现了更全面的性能优化。

性能提升机制：

1. 减少渲染次数：

   // React 17 - 会触发3次渲染
   function handleClick() {
       setCount(c => c + 1);
       setFlag(f => !f);
       setName('new name');
   }
   
   // React 18 - 只触发1次渲染（自动批处理）
   function handleClick() {
       setCount(c => c + 1);
       setFlag(f => !f);
       setName('new name');
       // 三个更新会被批处理为一次渲染
   }
   

2. 异步操作中的批处理：

   // React 17 - 异步操作中每次都会重渲染
   function handleAsync() {
       setTimeout(() => {
           setCount(c => c + 1); // 触发渲染
           setFlag(f => !f);     // 再次触发渲染
       }, 1000);
   }
   
   // React 18 - 异步操作中也会批处理
   function handleAsync() {
       setTimeout(() => {
           setCount(c => c + 1);
           setFlag(f => !f);
           // 两次更新批处理为一次渲染
       }, 1000);
   }
   

性能对比分析：

1. 渲染性能提升：

   function PerformanceComparison() {
       const [state1, setState1] = useState(0);
       const [state2, setState2] = useState(0);
       const [state3, setState3] = useState(0);
       
       // 性能监控
       useEffect(() => {
           console.log('Component rendered');
       });
       
       const handleMultipleUpdates = () => {
           // React 18: 只会打印一次 "Component rendered"
           setState1(prev => prev + 1);
           setState2(prev => prev + 1);
           setState3(prev => prev + 1);
       };
       
       return (
           <div onClick={handleMultipleUpdates}>
               {state1} - {state2} - {state3}
           </div>
       );
   }
   

2. Promise链中的批处理：

   function AsyncBatchingExample() {
       const [loading, setLoading] = useState(false);
       const [data, setData] = useState(null);
       const [error, setError] = useState(null);
       
       const fetchData = async () => {
           try {
               setLoading(true);
               const result = await api.getData();
               
               // React 18: 以下三个更新会被批处理
               setLoading(false);
               setData(result);
               setError(null);
           } catch (err) {
               setLoading(false);
               setError(err);
               setData(null);
           }
       };
       
       return (
           <div>
               {loading && <Spinner />}
               {error && <Error message={error.message} />}
               {data && <DataDisplay data={data} />}
           </div>
       );
   }
   

控制批处理行为：

1. 强制同步更新：

   import { flushSync } from 'react-dom';
   
   function handleClick() {
       flushSync(() => {
           setCount(c => c + 1);
       });
       // 强制立即渲染
       
       flushSync(() => {
           setFlag(f => !f);
       });
       // 再次强制立即渲染
   }
   

2. 批处理与并发特性结合：

   function ConcurrentBatching() {
       const [query, setQuery] = useState('');
       const [results, setResults] = useState([]);
       const [isPending, startTransition] = useTransition();
       
       const handleSearch = (value) => {
           setQuery(value); // 紧急更新
           
           startTransition(() => {
               // 非紧急更新，会与其他transition更新批处理
               setResults(performSearch(value));
           });
       };
       
       return (
           <div>
               <input onChange={(e) => handleSearch(e.target.value)} />
               {isPending ? <Loading /> : <Results data={results} />}
           </div>
       );
   }
   

性能收益：

• 渲染次数减少50-80%：大幅降低组件重新渲染频率
• DOM操作优化：减少不必要的DOM更新和回流重绘
• JavaScript执行时间减少：避免重复的渲染计算
• 用户体验提升：减少UI闪烁和卡顿现象
• 电池续航优化：移动设备上减少CPU使用

注意事项：

• 自动批处理默认启用，无需额外配置
• 某些边缘情况下可能需要使用flushSync强制同步更新
• 与Strict Mode结合可能会影响某些副作用的执行时机
• 需要注意状态依赖的计算逻辑，确保批处理不影响业务逻辑正确性

Which third-party state libraries is useSyncExternalStore suitable for?

考察点：外部状态集成。

答案：

useSyncExternalStore是React 18专门为第三方状态管理库设计的Hook，用于安全地订阅外部数据源。它主要适用于需要与React并发特性兼容的状态库，解决了外部状态在并发渲染中可能出现的撕裂（tearing）问题。

适用的状态库类型：

1. Redux及其生态：

   import { useSyncExternalStore } from 'react';
   import { store } from './redux-store';
   
   function useReduxState(selector) {
       return useSyncExternalStore(
           store.subscribe,                    // subscribe函数
           () => selector(store.getState()),   // getSnapshot
           () => selector(store.getState())    // getServerSnapshot (SSR)
       );
   }
   
   function Counter() {
       const count = useReduxState(state => state.counter.value);
       return <div>{count}</div>;
   }
   

2. Zustand状态库：

   import { create } from 'zustand';
   import { useSyncExternalStore } from 'react';
   
   const useStore = create((set) => ({
       count: 0,
       increment: () => set((state) => ({ count: state.count + 1 })),
   }));
   
   function useZustandWithSyncStore(selector) {
       return useSyncExternalStore(
           useStore.subscribe,
           () => selector(useStore.getState()),
           () => selector(useStore.getState())
       );
   }
   

3. MobX状态库：

   import { observable } from 'mobx';
   import { useSyncExternalStore } from 'react';
   
   const store = observable({
       count: 0,
       increment() { this.count++; }
   });
   
   function useMobXStore() {
       return useSyncExternalStore(
           (callback) => {
               const dispose = store.observe(callback);
               return dispose;
           },
           () => store.count,
           () => store.count
       );
   }
   

4. Valtio状态库：

   import { proxy, subscribe, snapshot } from 'valtio';
   import { useSyncExternalStore } from 'react';
   
   const state = proxy({ count: 0 });
   
   function useValtioState() {
       return useSyncExternalStore(
           (callback) => subscribe(state, callback),
           () => snapshot(state),
           () => snapshot(state)
       );
   }
   

自定义状态库实现：

// 创建一个简单的状态管理器
function createStore(initialState) {
    let state = initialState;
    const listeners = new Set();
    
    return {
        getState: () => state,
        setState: (newState) => {
            state = { ...state, ...newState };
            listeners.forEach(listener => listener());
        },
        subscribe: (callback) => {
            listeners.add(callback);
            return () => listeners.delete(callback);
        }
    };
}

// 使用useSyncExternalStore连接自定义状态库
function useCustomStore(store, selector) {
    return useSyncExternalStore(
        store.subscribe,
        () => selector(store.getState()),
        () => selector(store.getState()) // SSR support
    );
}

// 实际使用
const userStore = createStore({ name: 'John', age: 30 });

function UserProfile() {
    const userName = useCustomStore(userStore, state => state.name);
    const userAge = useCustomStore(userStore, state => state.age);
    
    return (
        <div>
            <p>Name: {userName}</p>
            <p>Age: {userAge}</p>
        </div>
    );
}

与浏览器API集成：

// localStorage状态同步
function useLocalStorageState(key, defaultValue) {
    const subscribe = (callback) => {
        window.addEventListener('storage', callback);
        return () => window.removeEventListener('storage', callback);
    };
    
    const getSnapshot = () => {
        const stored = localStorage.getItem(key);
        return stored ? JSON.parse(stored) : defaultValue;
    };
    
    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
}

// 网络状态监听
function useOnlineStatus() {
    const subscribe = (callback) => {
        window.addEventListener('online', callback);
        window.addEventListener('offline', callback);
        return () => {
            window.removeEventListener('online', callback);
            window.removeEventListener('offline', callback);
        };
    };
    
    return useSyncExternalStore(
        subscribe,
        () => navigator.onLine,
        () => true // SSR默认为在线状态
    );
}

主要优势：

• 并发安全：防止在并发渲染中出现状态撕裂
• SSR兼容：支持服务端渲染场景
• 性能优化：只在外部状态真正变化时触发重渲染
• 标准化接口：为第三方状态库提供统一的React集成方案

使用注意事项：

• getSnapshot函数必须返回不可变的值
• subscribe函数需要返回取消订阅的cleanup函数
• SSR场景下需要提供getServerSnapshot函数
• 适用于任何需要订阅外部数据源的场景（状态库、浏览器API、WebSocket等）

How to use React.memo for precise component optimization?

考察点：精确优化策略。

答案：

React.memo是一个高阶组件，通过浅比较props来决定是否重新渲染组件，实现精确的性能优化。正确使用React.memo需要理解其比较机制、适用场景，并配合自定义比较函数来实现精确控制，避免不必要的重渲染。

基本用法和原理：

// 基础使用
const ExpensiveComponent = React.memo(function ExpensiveComponent({ data, count }) {
    console.log('ExpensiveComponent rendered');
    return (
        <div>
            <h3>Count: {count}</h3>
            <ul>
                {data.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    );
});

// 父组件中使用
function Parent() {
    const [count, setCount] = useState(0);
    const [unrelatedState, setUnrelatedState] = useState(0);
    
    const data = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
    ];
    
    return (
        <div>
            <button onClick={() => setCount(c => c + 1)}>
                Increment Count: {count}
            </button>
            <button onClick={() => setUnrelatedState(s => s + 1)}>
                Unrelated: {unrelatedState}
            </button>
            {/* 只有count变化时才重新渲染 */}
            <ExpensiveComponent data={data} count={count} />
        </div>
    );
}

自定义比较函数实现精确控制：

// 1. 深度比较某个特定属性
const DeepCompareComponent = React.memo(
    function DeepCompareComponent({ config, items }) {
        return (
            <div>
                <h4>Config: {config.theme}</h4>
                {items.map(item => <div key={item.id}>{item.name}</div>)}
            </div>
        );
    },
    (prevProps, nextProps) => {
        // 自定义比较逻辑
        if (prevProps.config.theme !== nextProps.config.theme) {
            return false; // 需要重新渲染
        }
        
        // 深度比较items数组
        if (prevProps.items.length !== nextProps.items.length) {
            return false;
        }
        
        return prevProps.items.every((item, index) => 
            item.id === nextProps.items[index].id &&
            item.name === nextProps.items[index].name
        );
    }
);

// 2. 基于特定字段的比较
const UserCard = React.memo(
    function UserCard({ user, onEdit, theme }) {
        return (
            <div className={`user-card ${theme}`}>
                <h3>{user.name}</h3>
                <p>{user.email}</p>
                <button onClick={() => onEdit(user.id)}>Edit</button>
            </div>
        );
    },
    (prevProps, nextProps) => {
        // 只关心用户核心信息，忽略其他字段变化
        return (
            prevProps.user.id === nextProps.user.id &&
            prevProps.user.name === nextProps.user.name &&
            prevProps.user.email === nextProps.user.email &&
            prevProps.theme === nextProps.theme
            // 忽略onEdit函数引用的变化
        );
    }
);

与hooks结合的优化策略：

// 1. 结合useCallback优化函数props
function OptimizedParent() {
    const [users, setUsers] = useState([]);
    const [filter, setFilter] = useState('');
    
    // 使用useCallback稳定函数引用
    const handleEdit = useCallback((userId) => {
        console.log('Editing user:', userId);
        // 编辑逻辑
    }, []);
    
    const handleDelete = useCallback((userId) => {
        setUsers(users => users.filter(u => u.id !== userId));
    }, []);
    
    const filteredUsers = useMemo(() => {
        return users.filter(user => 
            user.name.toLowerCase().includes(filter.toLowerCase())
        );
    }, [users, filter]);
    
    return (
        <div>
            <input 
                value={filter} 
                onChange={(e) => setFilter(e.target.value)} 
                placeholder="Filter users..."
            />
            {filteredUsers.map(user => (
                <UserCard
                    key={user.id}
                    user={user}
                    onEdit={handleEdit}
                    onDelete={handleDelete}
                />
            ))}
        </div>
    );
}

// 2. 复杂组件的精确优化
const ComplexListItem = React.memo(
    function ComplexListItem({ 
        item, 
        isSelected, 
        onSelect, 
        onToggle, 
        renderActions 
    }) {
        console.log(`Rendering item ${item.id}`);
        
        return (
            <div 
                className={`list-item ${isSelected ? 'selected' : ''}`}
                onClick={() => onSelect(item.id)}
            >
                <div className="item-content">
                    <h4>{item.title}</h4>
                    <p>{item.description}</p>
                    <div className="item-metadata">
                        <span>Created: {item.createdAt}</span>
                        <span>Status: {item.status}</span>
                    </div>
                </div>
                <div className="item-actions">
                    <button onClick={(e) => {
                        e.stopPropagation();
                        onToggle(item.id);
                    }}>
                        {item.isActive ? 'Deactivate' : 'Activate'}
                    </button>
                    {renderActions && renderActions(item)}
                </div>
            </div>
        );
    },
    (prevProps, nextProps) => {
        // 精确比较需要关心的属性
        const itemChanged = 
            prevProps.item.id !== nextProps.item.id ||
            prevProps.item.title !== nextProps.item.title ||
            prevProps.item.description !== nextProps.item.description ||
            prevProps.item.status !== nextProps.item.status ||
            prevProps.item.isActive !== nextProps.item.isActive ||
            prevProps.item.createdAt !== nextProps.item.createdAt;
            
        const selectionChanged = prevProps.isSelected !== nextProps.isSelected;
        
        // 注意：这里不比较函数props，因为它们通常用useCallback优化
        return !itemChanged && !selectionChanged;
    }
);

性能监控和调试：

// 性能监控HOC
function withPerformanceMonitoring(Component, componentName) {
    return React.memo(
        function MonitoredComponent(props) {
            const renderStartTime = performance.now();
            
            useEffect(() => {
                const renderEndTime = performance.now();
                console.log(
                    `${componentName} render time: ${renderEndTime - renderStartTime}ms`
                );
            });
            
            return <Component {...props} />;
        },
        (prevProps, nextProps) => {
            const hasChanged = Object.keys(nextProps).some(key => 
                prevProps[key] !== nextProps[key]
            );
            
            if (hasChanged) {
                console.log(`${componentName} will re-render due to props change`);
            }
            
            return !hasChanged;
        }
    );
}

// 使用示例
const MonitoredExpensiveComponent = withPerformanceMonitoring(
    ExpensiveComponent, 
    'ExpensiveComponent'
);

最佳实践指南：

1. 选择性使用：只对渲染成本高的组件使用memo
2. 合理的比较策略：避免过度复杂的比较逻辑，可能得不偿失
3. 配合其他优化：结合useCallback、useMemo使用
4. 避免内联对象：props中避免每次创建新的对象或数组
5. 性能测试：使用React DevTools Profiler验证优化效果

常见陷阱和解决方案：

• 函数props问题：使用useCallback或自定义比较忽略函数变化
• 对象props问题：使用useMemo或将对象拆解为基本类型props
• 过度优化：简单组件使用memo可能适得其反
• 依赖稳定性：确保传入的props有稳定的引用

How to solve Context performance problems?

考察点：Context性能优化。

答案：

Context的主要性能问题是当Context value变化时，所有使用该Context的组件都会重新渲染，即使它们只使用了Context中的一小部分数据。解决方案包括Context分割、使用useMemo优化value、实现订阅模式以及合理的组件结构设计。

核心性能问题分析：

// 问题示例 - Context变化导致所有消费者重渲染
const AppContext = createContext();

function AppProvider({ children }) {
    const [user, setUser] = useState(null);
    const [theme, setTheme] = useState('light');
    const [settings, setSettings] = useState({});
    
    // 每次渲染都创建新对象，导致所有消费者重渲染
    const value = {
        user, setUser,
        theme, setTheme,
        settings, setSettings
    };
    
    return (
        <AppContext.Provider value={value}>
            {children}
        </AppContext.Provider>
    );
}

// 所有使用Context的组件都会在任何值变化时重渲染
function UserProfile() {
    const { user } = useContext(AppContext); // 即使只用user，theme变化也会重渲染
    return <div>{user?.name}</div>;
}

解决方案1：Context分割策略

// 将大Context分割为多个小Context
const UserContext = createContext();
const ThemeContext = createContext();
const SettingsContext = createContext();

function UserProvider({ children }) {
    const [user, setUser] = useState(null);
    
    const value = useMemo(() => ({
        user, setUser
    }), [user]);
    
    return (
        <UserContext.Provider value={value}>
            {children}
        </UserContext.Provider>
    );
}

function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');
    
    const value = useMemo(() => ({
        theme, setTheme
    }), [theme]);
    
    return (
        <ThemeContext.Provider value={value}>
            {children}
        </ThemeContext.Provider>
    );
}

// 组合多个Provider
function AppProviders({ children }) {
    return (
        <UserProvider>
            <ThemeProvider>
                <SettingsProvider>
                    {children}
                </SettingsProvider>
            </ThemeProvider>
        </UserProvider>
    );
}

解决方案2：使用useMemo优化Context value

function OptimizedAppProvider({ children }) {
    const [user, setUser] = useState(null);
    const [theme, setTheme] = useState('light');
    const [settings, setSettings] = useState({});
    
    // 分别缓存不同部分的值
    const userValue = useMemo(() => ({
        user, setUser
    }), [user]);
    
    const themeValue = useMemo(() => ({
        theme, setTheme
    }), [theme]);
    
    const settingsValue = useMemo(() => ({
        settings, setSettings
    }), [settings]);
    
    // 整体value也要缓存
    const contextValue = useMemo(() => ({
        ...userValue,
        ...themeValue,
        ...settingsValue
    }), [userValue, themeValue, settingsValue]);
    
    return (
        <AppContext.Provider value={contextValue}>
            {children}
        </AppContext.Provider>
    );
}

解决方案3：选择性订阅模式

// 创建支持选择性订阅的Context
function createSelectableContext(initialState) {
    const Context = createContext();
    const listeners = new Set();
    
    function Provider({ children }) {
        const [state, setState] = useState(initialState);
        
        const subscribe = useCallback((listener) => {
            listeners.add(listener);
            return () => listeners.delete(listener);
        }, []);
        
        const updateState = useCallback((updates) => {
            setState(prev => {
                const newState = { ...prev, ...updates };
                listeners.forEach(listener => listener(newState, prev));
                return newState;
            });
        }, []);
        
        const value = useMemo(() => ({
            state,
            setState: updateState,
            subscribe
        }), [state, updateState, subscribe]);
        
        return <Context.Provider value={value}>{children}</Context.Provider>;
    }
    
    function useSelector(selector) {
        const context = useContext(Context);
        if (!context) throw new Error('useSelector must be used within Provider');
        
        const [selectedValue, setSelectedValue] = useState(() => 
            selector(context.state)
        );
        
        useEffect(() => {
            return context.subscribe((newState, prevState) => {
                const newSelected = selector(newState);
                const prevSelected = selector(prevState);
                
                if (newSelected !== prevSelected) {
                    setSelectedValue(newSelected);
                }
            });
        }, [context.subscribe, selector]);
        
        return selectedValue;
    }
    
    return { Provider, useSelector, Context };
}

// 使用选择性订阅
const { Provider: AppProvider, useSelector } = createSelectableContext({
    user: null,
    theme: 'light',
    settings: {}
});

function UserProfile() {
    // 只订阅user变化
    const user = useSelector(state => state.user);
    return <div>{user?.name}</div>;
}

function ThemeToggle() {
    // 只订阅theme变化
    const theme = useSelector(state => state.theme);
    return <button>{theme}</button>;
}