面试题：React高阶组件与其他复用模式的比较与选择

高阶组件（HOC）

优点：
- 逻辑复用性高：可以将通用逻辑提取到HOC中，然后应用到多个组件上，比如权限验证逻辑，一个HOC可以用于多个需要权限验证的组件。
- 不侵入原组件：通过包裹组件的方式添加功能，原组件代码无需修改，保持组件的单一职责原则。
- 灵活性强：可以传递不同的参数给HOC，从而定制不同的逻辑。
缺点：
- 嵌套地狱：多个HOC嵌套使用时，会导致组件层级过深，调试和理解代码变得困难，例如withRouter(withAuth(MyComponent))。
- 命名冲突：多个HOC可能会向被包裹组件的props中添加相同名称的属性，导致命名冲突。
- 性能问题：每次HOC包裹的组件更新时，即使HOC的逻辑没有变化，也可能触发不必要的重新渲染。
适用场景：
- 权限控制：创建一个withAuth HOC，检查用户是否登录，有权限则渲染组件，否则重定向到登录页。例如：

import React from'react';
import { withRouter } from'react-router-dom';

const withAuth = (WrappedComponent) => {
    return (props) => {
        const isLoggedIn = true; // 模拟登录状态
        if (!isLoggedIn) {
            props.history.push('/login');
            return null;
        }
        return <WrappedComponent {...props} />;
    };
};

const MyProtectedComponent = () => {
    return <div>这是一个需要权限的组件</div>;
};

export default withRouter(withAuth(MyProtectedComponent));

- **数据获取**：如使用`withData` HOC来获取特定数据并传递给组件。

Render Props

优点：
- 灵活性更高：相比HOC，Render Props通过一个函数作为prop传递，能更精细地控制逻辑复用和数据传递，例如可以在函数参数中传递多个不同的数据来源。
- 避免命名冲突：不存在像HOC那样向props中添加属性可能导致的命名冲突问题。
- 易于理解：数据和逻辑的传递通过函数调用直观体现，代码逻辑相对清晰。
缺点：
- 破坏组件结构：如果在组件树中大量使用Render Props，会使组件结构变得复杂，因为要在多个地方传递函数。
- 难以阅读：多层嵌套的Render Props函数会使代码难以阅读和维护。
适用场景：
- 跨组件数据共享：例如Mouse组件通过Render Props将鼠标位置共享给其他组件。

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

const Mouse = ({ children }) => {
    const [position, setPosition] = useState({ x: 0, y: 0 });

    useEffect(() => {
        const handleMouseMove = (e) => {
            setPosition({ x: e.clientX, y: e.clientY });
        };
        window.addEventListener('mousemove', handleMouseMove);
        return () => {
            window.removeEventListener('mousemove', handleMouseMove);
        };
    }, []);

    return children(position);
};

const App = () => {
    return (
        <Mouse>
            {({ x, y }) => (
                <div>
                    <p>鼠标位置: X: {x}, Y: {y}</p>
                </div>
            )}
        </Mouse>
    );
};

- **组件间逻辑复用**：如动画逻辑的复用。

Hook

优点：
- 简洁直观：在函数组件内部直接复用状态和副作用逻辑，无需像HOC和Render Props那样包裹组件或传递函数，代码更加简洁明了。
- 避免嵌套问题：不会出现HOC的嵌套地狱和Render Props破坏组件结构的问题。
- 更好的性能优化：可以通过useCallback和useMemo等Hook精确控制依赖，避免不必要的重新渲染。
缺点：
- 只能在函数组件中使用：对于类组件无法使用，在一些遗留项目中兼容性有问题。
- 复杂逻辑管理：对于非常复杂的逻辑，可能需要多个Hook组合，管理起来相对困难。
适用场景：
- 状态管理：useState用于管理组件的本地状态，例如计数器。

import React, { useState } from'react';

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>计数: {count}</p>
            <button onClick={() => setCount(count + 1)}>增加</button>
        </div>
    );
};

- **副作用操作**：`useEffect`用于处理组件挂载、更新和卸载时的副作用，如数据获取、订阅等。

星途面试题库

面试题：React高阶组件与其他复用模式的比较与选择

知识考点

面试题答案

高阶组件（HOC）

Render Props

Hook