面试题：React Hooks 的原理及在复杂场景下的应用

React Hooks 底层原理

状态的存储
- React 使用链表结构来存储函数组件的状态。每个 Hook 在链表中是一个节点，当组件首次渲染时，会按照 Hook 声明的顺序依次初始化这些节点。例如，useState 会在链表中创建一个包含状态值和更新函数的节点。这个链表和组件实例相关联，使得 React 能够跟踪每个组件的状态。
- 对于 useState，它返回的状态值实际上是从这个链表节点中获取的，并且在更新时会修改该节点的状态值。
更新机制
- 当调用 useState 返回的更新函数（如 setState）或 useReducer 的 dispatch 函数时，React 会将更新放入一个队列中。然后，React 会重新调度组件的渲染。在重新渲染时，React 会从链表的头部开始，按照 Hook 声明的顺序重新计算每个 Hook 的状态，这样就能保证状态的一致性和正确更新。例如，在 useState 中，新的状态值会覆盖旧的值，触发视图的更新。

在大型 React 项目中合理利用 React Hooks 构建架构

使用 useContext 进行状态共享
- 原理：useContext 允许组件订阅 React 上下文对象。上下文对象可以由父组件创建并通过 Provider 传递，这样深层嵌套的子组件可以直接获取上下文数据，而无需通过多层 props 传递。
- 举例：假设一个电商应用有一个全局的购物车状态。可以创建一个 CartContext：

import React, { createContext, useState } from'react';

const CartContext = createContext();

const CartProvider = ({ children }) => {
    const [cartItems, setCartItems] = useState([]);
    return (
        <CartContext.Provider value={{ cartItems, setCartItems }}>
            {children}
        </CartContext.Provider>
    );
};

export { CartContext, CartProvider };

然后，在任意子组件中可以使用 useContext 获取购物车状态：

import React, { useContext } from'react';
import { CartContext } from './CartContext';

const CartDisplay = () => {
    const { cartItems } = useContext(CartContext);
    return (
        <div>
            <p>Cart items: {cartItems.length}</p>
        </div>
    );
};

export default CartDisplay;

使用 useReducer 进行复杂状态管理
- 原理：useReducer 是 useState 的替代方案，适用于状态更新逻辑复杂的场景。它接收一个 reducer 函数和初始状态，reducer 函数根据不同的 action 类型来处理状态更新。
- 举例：在一个任务管理应用中，任务有不同的状态（如新建、进行中、完成），可以使用 useReducer 来管理任务状态：

import React, { useReducer } from'react';

const taskReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_TASK':
            return [...state, { id: Date.now(), text: action.text, status: 'new' }];
        case 'UPDATE_TASK_STATUS':
            return state.map(task =>
                task.id === action.taskId? { ...task, status: action.newStatus } : task
            );
        default:
            return state;
    }
};

const TaskManager = () => {
    const [tasks, dispatch] = useReducer(taskReducer, []);
    const addTask = (text) => {
        dispatch({ type: 'ADD_TASK', text });
    };
    const updateTaskStatus = (taskId, newStatus) => {
        dispatch({ type: 'UPDATE_TASK_STATUS', taskId, newStatus });
    };
    return (
        <div>
            {/* 任务添加和显示逻辑 */}
        </div>
    );
};

export default TaskManager;

通过结合 useContext 和 useReducer，可以在大型项目中构建一个清晰、可维护且高效的状态管理架构。例如，将任务管理的 useReducer 放在一个 TaskContext 中，使得不同组件可以共享和更新任务状态，同时保持代码的模块化和可扩展性。

星途面试题库

面试题：React Hooks 的原理及在复杂场景下的应用

知识考点

面试题答案

React Hooks 底层原理

在大型 React 项目中合理利用 React Hooks 构建架构