React 高阶组件和渲染属性的区别是什么？

高阶组件（HOC）和渲染属性（Render Props）是 React 中两种常用的逻辑复用方案，它们的核心目标相同（复用组件逻辑），但实现方式和适用场景有显著区别：

1. 定义与实现方式

高阶组件（HOC）

• 本质是函数，接收一个组件作为参数，返回一个新的增强组件。
• 通过包装组件的方式扩展功能，新组件会包含原组件并附加新逻辑。

// HOC 示例：添加鼠标位置跟踪逻辑
function withMouse(Component) {
  return class extends React.Component {
    state = { x: 0, y: 0 };
    
    handleMouseMove = (e) => {
      this.setState({ x: e.clientX, y: e.clientY });
    };
    
    render() {
      return (
        <div onMouseMove={this.handleMouseMove}>
          {/* 将逻辑结果通过 props 传递给原组件 */}
          <Component {...this.props} mouse={this.state} />
        </div>
      );
    }
  };
}

// 使用 HOC
const MouseTracker = withMouse(({ mouse }) => (
  <div>鼠标位置：{mouse.x}, {mouse.y}</div>
));

渲染属性（Render Props）

• 本质是组件，通过接收一个返回 React 元素的函数作为 props（通常命名为 render 或直接使用 children），将复用逻辑通过函数参数传递给调用者。
• 不创建新组件，而是通过函数回调将逻辑传递给使用方。

// 渲染属性组件示例：同样实现鼠标位置跟踪
class Mouse extends React.Component {
  state = { x: 0, y: 0 };
  
  handleMouseMove = (e) => {
    this.setState({ x: e.clientX, y: e.clientY });
  };
  
  render() {
    // 将逻辑结果通过函数参数传递给调用者
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// 使用渲染属性
const MouseTracker = () => (
  <Mouse render={(mouse) => (
    <div>鼠标位置：{mouse.x}, {mouse.y}</div>
  )} />
);

// 也可以用 children 代替 render props
const MouseTracker = () => (
  <Mouse>
    {(mouse) => <div>鼠标位置：{mouse.x}, {mouse.y}</div>}
  </Mouse>
);

2. 核心区别

3. 适用场景

• 高阶组件（HOC）：
  适合封装通用且固定的逻辑（如权限控制、数据请求、日志记录），尤其是需要批量增强多个组件时。
  例：withRouter（路由）、connect（Redux）。
• 渲染属性（Render Props）：
  适合逻辑需要在不同场景下灵活展示时，或避免 HOC 嵌套过深的问题。
  例：鼠标跟踪、窗口大小监听等与 UI 展示强相关的逻辑。

4. 与 Hooks 的关系

随着 React Hooks（如 useState、useEffect）的出现，很多场景下 Hooks 可以更简洁地替代 HOC 和 Render Props：

• Hooks 是函数级别的逻辑复用，无需包装组件或传递函数，代码更简洁。
• 例如，上面的鼠标跟踪逻辑可用 Hook 实现：
• 
  function useMouse() {
    const [mouse, setMouse] = useState({ x: 0, y: 0 });
    useEffect(() => {
      const handleMove = (e) => setMouse({ x: e.clientX, y: e.clientY });
      window.addEventListener('mousemove', handleMove);
      return () => window.removeEventListener('mousemove', handleMove);
    }, []);
    return mouse;
  }
  
  // 直接在组件中使用
  const MouseTracker = () => {
    const mouse = useMouse();
    return <div>鼠标位置：{mouse.x}, {mouse.y}</div>;
  };

总结

• HOC 通过包装组件实现逻辑复用，适合通用逻辑的批量应用，但可能导致层级冗余。
• Render Props 通过函数回调实现逻辑复用，更灵活，适合动态展示场景。
• 现代 React 开发中，Hooks 通常是更优选择，可替代大部分 HOC 和 Render Props 的使用场景。