前端面试准备指南四之React篇

一、React Key的作用

1.1 Key的定义

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

1.2 Key的作用

• 帮助 React 识别哪些元素发生了变化
• 提高 diff 算法的效率
• 避免不必要的重新渲染

1.3 有Key与没Key的区别

情况	有Key	没Key
列表更新	精确定位变化的元素	可能导致错误的重新渲染
元素复用	根据Key匹配原有元素	无法匹配，可能创建新元素
性能	更高	可能性能下降

1.4 同一层级节点比较

React 的 diff 算法只在同一层级的节点之间进行比较：

• 相同Key：认为是同一个节点，比较属性变化
• 不同Key：认为是新节点，执行插入/删除操作
• 跨层级：无法移动，只能删除旧节点、创建新节点

1.5 最佳实践

• 使用稳定的唯一ID作为Key
• 避免使用数组下标作为Key（会导致渲染错误）
• 避免使用随机数作为Key

二、虚拟DOM与Diff算法

2.1 虚拟DOM定义

虚拟DOM 本质上是 JavaScript 对象，是对 真实DOM 的抽象表现。

const vdom = {
    type: "div",
    props: { className: "container", children: "Hello" },
};

2.2 虚拟DOM优势

• 减少直接操作DOM，提高性能
• 跨平台能力更强（SSR、Native等）
• 批量更新，减少重排重绘

2.3 Diff算法流程

1. 状态变更：记录新树和旧树的差异
2. 对比差异：通过diff算法找出最小更新点
3. 批量更新：将差异更新到真正的DOM中

2.4 render函数原理

1. 根据 tagName 生成父标签，读取 props，设置属性
2. 如果有 content，设置 innerHTML 或 innerText
3. 如果存在子元素，遍历子元素递归调用 render 方法
4. 将生成的子元素依次添加到父元素中，返回根元素

2.5 Diff算法优化策略

• 同级比较：只比较同层级的节点
• 类型比较：不同类型节点直接替换
• Key匹配：通过Key精确匹配节点

三、组件通信方式

3.1 父子组件通信

父->子通信：

• 使用 props 传递数据

;

function ChildComponent(props) {
    return 
{props.name}
;
}

子->父通信：

• 使用回调函数传递数据

function Parent() {
    const handleData = data => console.log(data);
    return ;
}

function Child({ onData }) {
    return  onData("data")}>发送;
}

父调用子方法：

• 使用 ref 获取子组件实例

const childRef = useRef();
childRef.current.handleMethod();

3.2 兄弟组件通信

通过父组件中转：

• 状态提升到父组件，子组件通过props和回调通信

使用状态管理库：

• Redux、MobX、Zustand 等

发布订阅模式：

• 使用 EventEmitter 或自定义事件系统

3.3 跨级组件通信

Context API：

const ThemeContext = React.createContext("light");

function App() {
    return (
        
            
        
    );
}

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return Button;
}

3.4 现代状态管理方案

方案	特点	适用场景
Zustand	轻量级，API简洁	中小型应用
Jotai	原子化状态管理	细粒度状态管理
Recoil	Facebook开发	大型应用

3.5 组件组合

将子组件作为 children 或 render prop 传递，避免过度使用 Context：

function Card({ children }) {
    return 
{children}
;
}

function MouseTracker({ render }) {
    return 
{render(mousePosition)}
;
}

四、JSX解析

4.1 JSX本质

JSX 是 JavaScript 的语法扩展，React 使用它来描述 UI 结构。

4.2 编译过程

JSX 通过编译器（如 Babel）转换为 React.createElement 函数调用：

const element = 
Hello
;

const element = React.createElement("div", { className: "greeting" }, "Hello");

4.3 createElement参数

React.createElement(
    type, // 元素类型
    props, // 元素属性
    children // 子元素
);

五、React生命周期

5.1 类组件生命周期

挂载阶段：

钩子	说明
constructor	组件实例创建
getDerivedStateFromProps	从props派生state（静态方法）
render	渲染组件
componentDidMount	组件挂载完成

更新阶段：

钩子	说明
getDerivedStateFromProps	props变化时更新state
shouldComponentUpdate	决定是否重新渲染
render	重新渲染
getSnapshotBeforeUpdate	获取更新前快照
componentDidUpdate	组件更新完成

卸载阶段：

钩子	说明
componentWillUnmount	组件卸载前清理

5.2 错误处理生命周期

钩子	说明
getDerivedStateFromError	捕获子组件错误（静态方法）
componentDidCatch	实例方法，记录错误信息

5.3 废弃的生命周期

• componentWillMount、componentWillReceiveProps、componentWillUpdate
• React 16 标记为 UNSAFE_
• React 18 完全移除

5.4 Hooks生命周期（函数组件）

类组件钩子	Hook
componentDidMount	useEffect(() => {}, [])
componentDidUpdate	useEffect(() => {}, [deps])
componentWillUnmount	useEffect(() => { return () => {} }, [])

useEffect(() => {
    console.log("mounted");
    return () => console.log("cleanup");
}, []);

5.5 useLayoutEffect

• 与 useEffect 类似，但同步执行
• 在 DOM 更新后同步执行，用于DOM测量

六、React性能优化

6.1 渲染优化

函数组件优化：

Hook	作用
React.memo	缓存组件渲染结果
useMemo	缓存计算结果
useCallback	缓存函数引用

const MemoizedComponent = React.memo(Component);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedCallback = useCallback(() => {
    doSomething(a, b);
}, [a, b]);

类组件优化：

• 使用 PureComponent 自动进行浅比较
• 实现 shouldComponentUpdate 自定义比较逻辑

通用优化：

• 使用稳定的 key 值
• 避免在 render 中创建新对象、新函数
• 保持 props 和 state 扁平化
• 使用 return null 代替 display: none

6.2 长列表优化

• 虚拟滚动：react-window、react-virtualized
• 分页加载或无限滚动

6.3 图片优化

• 懒加载图片
• 使用适当尺寸的图片
• 使用 WebP 格式

6.4 动画优化

• 使用 transform 和 opacity 实现动画
• 使用 requestAnimationFrame 优化动画性能
• 避免布局抖动

6.5 代码分割

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
    return (
        }>
            
        
    );
}

6.6 Concurrent Mode优化

• useTransition：标记非紧急更新
• useDeferredValue：延迟处理非紧急状态

6.7 构建优化

• 使用 esbuild 或 swc 加速构建
• 配置合理的 sourcemap
• 压缩和混淆代码
• 提取 CSS 到单独文件

七、this绑定

7.1 绑定方式对比

方式	写法	性能	推荐度
bind方法	this.handleClick = this.handleClick.bind(this)	每次渲染创建新函数	中
箭头函数	onClick={() => this.handleClick()}	每次渲染创建新函数	中
类属性	handleClick = () => {}	只创建一次	高

7.2 推荐写法

class MyComponent extends React.Component {
    handleClick = () => {
        console.log(this);
    };
}

八、React 18新特性

8.1 并发特性

特性	说明
时间切片	将渲染拆分为小任务，优先处理用户交互
Suspense	支持组件级别代码分割和数据获取
useTransition	标记非紧急更新
useDeferredValue	延迟处理非紧急状态

8.2 自动批处理

• 所有状态更新都会被批处理
• 包括 setTimeout、Promise 回调中的更新

8.3 新根API

import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root"));
root.render();

8.4 服务端组件

• 服务端渲染组件，减少客户端包体积
• 支持直接访问后端数据

8.5 其他改进

Hook	说明
useId	生成唯一ID
useSyncExternalStore	订阅外部状态
useInsertionEffect	CSS-in-JS优化

8.6 现代渲染策略

策略	说明
Streaming SSR	流式服务端渲染，逐步发送HTML，减少首屏时间
SSG	静态站点生成，构建时预渲染页面
ISR	增量静态再生，运行时按需重新生成页面

九、React Fiber

9.1 Fiber架构目的

React Fiber 是 React 16 引入的新的调和算法，解决同步渲染阻塞问题。

9.2 核心特性

特性	说明
增量渲染	将渲染拆分为小单元
优先级调度	根据任务优先级安排执行顺序
可中断	允许处理更高优先级任务
时间切片	空闲时间执行渲染任务

9.3 Fiber工作流程

1. Render阶段：生成Fiber树，确定需要更新的内容
2. Commit阶段：执行DOM操作

十、setState同步异步

10.1 合成事件与钩子函数

在合成事件和钩子函数中，setState 是”异步”的：

this.setState({ count: this.state.count + 1 });
console.log(this.state.count);

this.setState({ count: this.state.count + 1 }, () => {
    console.log(this.state.count);
});

10.2 原生事件与setTimeout

在原生事件和 setTimeout 中，setState 是同步的：

document.getElementById("btn").addEventListener("click", () => {
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count);
});

setTimeout(() => {
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count);
}, 0);

10.3 批量更新

• 同一值的多次 setState 会被覆盖
• 不同值的 setState 会合并批量更新

10.4 异步原理揭秘

setState 的”异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的”异步”，当然可以通过第二个参数 setState(partialState, callback) 中的 callback 拿到更新后的结果。

十一、Redux核心概念

11.1 数据流

用户行为 → Action → Reducer → Store → View

11.2 核心组成

组成	说明
Store	存储所有状态
Action	描述发生的事件
Reducer	根据Action更新状态

11.3 React-Redux

组件	说明
Provider	从最外部封装整个应用，传递store
Connect	连接React组件与Redux store

Connect 的工作原理：

1. 包装原组件，将 state 和 action 通过 props 的方式传入到原组件内部
2. 监听 store tree 变化，使其包装的原组件可以响应 state 变化

十二、高阶组件

12.1 定义

高阶组件是参数为组件，返回值为新组件的函数。

function withAuth(WrappedComponent) {
    return function WithAuthComponent(props) {
        if (isAuthenticated) {
            return ;
        }
        return ;
    };
}

12.2 作用

• 代码复用，逻辑抽象
• 渲染劫持
• State 抽象和更改
• Props 更改

十三、创建组件的方式

13.1 函数组件（推荐）

const Counter = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

    return (
        

            
{count}
             setCount(count + 1)}>Increment
        
    );
};

13.2 类组件

class Counter extends React.Component {
    state = { count: 0 };

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            

                
{this.state.count}
                Increment
            
        );
    }
}

13.3 现代组件写法

写法	说明
React.memo	缓存函数组件渲染
forwardRef	传递ref给子组件
lazy	动态导入组件

十四、元素与组件的区别

概念	说明
React元素	普通对象，描述UI结构
组件	类或纯函数，由元素构成

十五、React核心特点

15.1 核心思想

• React：函数式编程，单向数据流，数据不可变
• 对比：Vue 采用响应式系统，数据驱动视图

15.2 模板语法

• React：使用 JSX，将 HTML 与 JavaScript 结合，更灵活
• 对比：Vue 使用 HTML-like 模板语法，支持指令

15.3 状态管理

方案	特点	适用场景
Redux	成熟稳定，生态完善	大型应用
Zustand	轻量级，API简洁	中小型应用
Jotai	原子化状态管理	细粒度状态管理

15.4 性能优化

优化方式	说明
memo/useMemo/useCallback	手动优化渲染性能
并发模式	React 18 新特性
编译时优化	Tree Shaking、静态提升

15.5 适用场景

• 大型应用
• 复杂状态管理需求
• 需要良好的 TypeScript 支持

十六、Redux与Vuex对比

16.1 核心区别

对比项	Redux	Vuex
数据可变性	不可变，每次返回新state	可变，直接修改
变化检测	订阅机制触发更新通知	getter/setter监听
适用框架	React	Vue