【React】Props drilling 是坏习惯吗？如何优雅解决？

Props Drilling 是指在组件树中通过层层传递 props，将数据或方法从父组件传递到深层的子组件。这种方式在简单场景下是合理的，但在复杂场景下可能会导致代码难以维护和扩展，因此被认为是一种 反模式（bad practice）。以下是关于 Props Drilling 的详细分析以及优雅解决方案。

---

1. 为什么 Props Drilling 是坏习惯？

问题一：代码冗长

当组件层级较深时，需要在每一层都显式传递 props，即使中间的组件并不需要使用这些 props。

const Parent = () => {
    const value = 'Hello';
    return <Level1 value={value} />;
};

const Level1 = ({ value }) => <Level2 value={value} />;
const Level2 = ({ value }) => <Level3 value={value} />;
const Level3 = ({ value }) => <p>{value}</p>;

在以上代码中，value 被层层传递，Level1 和 Level2 只是“中间人”，没有实际使用 value，显得多余。

---

问题二：难以维护

• 如果需要修改 props 的名称或结构，所有中间组件都需要同步更新。
• 当组件层次发生变化（例如添加或删除中间组件）时，props 的传递逻辑也需要调整。

---

问题三：耦合性高

子组件对父组件的数据结构有强依赖，降低了组件的复用性。例如，Level3 组件必须依赖 value，无法脱离当前层级独立使用。

---

2. 如何优雅解决 Props Drilling？

2.1 使用 Context API

Context API 是 React 官方提供的解决 Props Drilling 的工具，适用于需要跨层级共享状态的场景。

示例代码

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

// 创建 Context
const MyContext = createContext();

const Parent = () => {
    const value = 'Hello from Context';
    return (
        <MyContext.Provider value={value}>
            <Level1 />
        </MyContext.Provider>
    );
};

const Level1 = () => <Level2 />;
const Level2 = () => <Level3 />;
const Level3 = () => {
    const value = useContext(MyContext); // 使用 Context
    return <p>{value}</p>;
};

优点

• 避免了中间组件的“中间人”角色。
• 数据集中管理，代码简洁。
• 官方支持，易于理解和使用。

注意事项

• 性能问题：当 Context 的值更新时，所有使用该 Context 的组件都会重新渲染，可能影响性能。
• 分离关注点：避免将所有状态放在一个 Context 中，可以创建多个 Context 来管理不同类型的数据。

---

2.2 使用状态管理库（Redux 或 Zustand）

对于复杂的全局状态管理，Redux 或 Zustand 是更优的选择。

Zustand 示例

Zustand 是一个轻量级状态管理工具，API 简单且性能优越。

import create from 'zustand';

// 创建 store
const useStore = create((set) => ({
    value: 'Hello from Zustand',
    setValue: (newValue) => set({ value: newValue }),
}));

const Parent = () => <Level1 />;
const Level1 = () => <Level2 />;
const Level2 = () => <Level3 />;
const Level3 = () => {
    const value = useStore((state) => state.value); // 直接从 store 获取数据
    return <p>{value}</p>;
};

优点

• 按需更新组件，性能更优。
• 使用简单，无需层层传递 props。
• 更适合复杂项目。

---

2.3 使用组件组合（Component Composition）

通过组件组合，将需要传递的数据封装到一个高阶组件或容器组件中，避免直接传递 props。

示例代码

const Parent = () => {
    const value = 'Hello from Composition';
    return (
        <Wrapper value={value}>
            <Level3 />
        </Wrapper>
    );
};

const Wrapper = ({ value, children }) => {
    return React.cloneElement(children, { value });
};

const Level3 = ({ value }) => <p>{value}</p>;

优点

• 避免了中间组件传递 props。
• 适合小规模的状态共享。

缺点

• 当状态复杂时，代码可能难以维护。

---

2.4 使用事件总线（Event Emitter）

通过事件机制实现组件间通信，适合松耦合的场景。

示例代码

import { EventEmitter } from 'events';

const eventBus = new EventEmitter();

const Parent = () => <Level1 />;
const Level1 = () => <Level2 />;
const Level2 = () => <Level3 />;
const Level3 = () => {
    const [value, setValue] = React.useState('');

    React.useEffect(() => {
        const listener = (data) => setValue(data);
        eventBus.on('update', listener);
        return () => eventBus.off('update', listener);
    }, []);

    return (
        <div>
            <p>{value}</p>
            <button onClick={() => eventBus.emit('update', 'Hello from Event Bus')}>
                Update
            </button>
        </div>
    );
};

优点

• 解耦组件，灵活性高。
• 无需层层传递 props。

缺点

• 状态不可追踪，调试困难。
• 适合小范围使用，不推荐全局状态管理。

---

2.5 React Query（数据驱动通信）

如果状态来源于异步数据（如 API 调用），可以使用 React Query 来管理状态。

示例代码

import { useQuery, QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const fetchData = async () => {
    return 'Hello from React Query';
};

const Parent = () => (
    <QueryClientProvider client={queryClient}>
        <Level1 />
    </QueryClientProvider>
);

const Level1 = () => <Level2 />;
const Level2 = () => <Level3 />;
const Level3 = () => {
    const { data } = useQuery('data', fetchData);
    return <p>{data}</p>;
};

优点

• 内置缓存和自动刷新机制。
• 避免复杂的状态管理逻辑。

缺点

• 仅适用于异步数据场景。

---

3. 总结

方案	适用场景	优点	缺点
Context API	跨层级状态共享，简单场景	官方支持，易用	性能问题，容易滥用
状态管理库	大型项目，全局复杂状态	性能好，按需更新	学习成本较高
组件组合	小范围状态共享，简单场景	避免中间组件传递	状态复杂时难维护
事件总线	松耦合组件通信	解耦灵活	状态不可追踪，调试困难
React Query	异步数据管理	内置缓存，自动刷新	仅适用于异步数据

推荐

• 简单场景：Context API 或 组件组合
• 复杂状态：Redux 或 Zustand
• 数据驱动：React Query
• 特殊需求：事件总线

根据项目需求选择合适的方案，避免滥用 Props Drilling，从而提高代码的可维护性和可扩展性！