JavaScript React高级模式_技术教程

React高级模式包括Render Props、高阶组件、复合组件和自定义Hook，用于提升组件复用性与可维护性。1. Render Props通过函数prop传递状态，实现逻辑与UI分离；2. 高阶组件（HOC）用于复用横切关注点逻辑，但易导致嵌套过深；3. 复合组件通过共享状态提供清晰的API结构，增强组件协作；4. 自定义Hook是当前推荐的逻辑复用方式，简洁且易于测试。实际开发中应优先使用自定义Hook和Render Props，遵循组合优于继承的设计理念。

React 高级模式并不是指某种复杂的语法，而是开发者在构建大型、可维护应用时总结出的最佳实践和设计思路。掌握这些模式能让你的组件更灵活、复用性更高，也更容易测试和维护。

1. Render Props 模式

这种模式通过一个名为 render 的 prop 来传递函数，让组件把自身的状态或逻辑共享给其他组件。

比如你有一个追踪鼠标位置的组件，你可以用 render props 把位置数据传出去：

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

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

  return {render(position)};
};

// 使用
 (
  鼠标位置：{x}, {y}
)} />

这种方式解耦了状态逻辑与 UI 渲染，适合封装通用行为。

2. 高阶组件（HOC）

高阶组件是一个函数，接收一个组件并返回一个新的增强组件。它常用于横切关注点，比如权限控制、日志、加载状态等。

const withLoading = (WrappedComponent) => {
  return (props) => {
    if (props.isLoading) {
      return 加载中...;
    }
    return ;
  };
};

// 使用
const UserListWithLoading = withLoading(UserList);

HOC 能复用逻辑，但容易造成嵌套过深或 props 冲突，使用时注意命名空间和透传必要属性。

3. Compound Components（复合组件）

这种模式允许你创建一组协同工作的子组件，共享内部状态，同时保持良好的 API 可读性。

例如实现一个下拉菜单：

const Dropdown = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    
      {React.Children.map(children, child =>
        React.isValidElement(child)
          ? React.cloneElement(child, { isOpen, toggle: () => setIsOpen(!isOpen) })
          : child
      )}
    
  );
};

Dropdown.Button = ({ toggle, isOpen }) => (
  
);

Dropdown.Menu = ({ isOpen, children }) => (
  isOpen ? {children} : null
);

这样调用起来很清晰：

用户不需要手动传状态，组件之间自动协作。

4. 自定义 Hook

这是目前最推荐的逻辑复用方式。将可复用的状态逻辑提取成自定义 Hook，既简洁又易于测试。

比如封装一个获取窗口大小的功能：

const useWindowSize = () => {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
};

// 使用
function App() {
  const { width, height } = useWindowSize();
  return 窗口尺寸：{width} x {height};
}