React组件组合模式深度解析 - 以krasimir/react-in-patterns为例

诸星葵Freeman

于 2025-06-03 09:01:56 发布

阅读量251

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00399/article/details/148391972

React组件组合模式深度解析 - 以krasimir/react-in-patterns为例

react-in-patterns A free book that talks about design patterns/techniques used while developing with React. 项目地址: https://gitcode.com/gh_mirrors/re/react-in-patterns

前言

在React开发中，组件组合是最核心的设计理念之一。本文将基于krasimir/react-in-patterns项目中的组合模式章节，深入剖析React中几种高效的组件组合方式，帮助开发者构建更灵活、可维护的React应用。

基础组件组合方式

1. 直接嵌套组件

最简单的组合方式是将组件直接嵌套使用：

<App>
  <Header>
    <Navigation />
  </Header>
</App>

这种方式虽然直观，但存在明显问题：

组件间耦合度高
难以复用Header组件（如需要不带Navigation的Header）
测试困难（需要实例化所有嵌套组件）

2. 使用children API

React提供了children属性，可以显著提高组件灵活性：

function App() {
  return (
    <Header>
      <Navigation />
    </Header>
  );
}

function Header({ children }) {
  return <header>{children}</header>;
}

优势：

Header组件不再依赖具体子组件
测试时可以轻松mock子组件
组件复用性大大提高

进阶组合模式

1. 组件作为props传递

React组件可以像普通数据一样通过props传递：

function App() {
  return (
    <Header 
      title={<Title />}
      content={<Navigation />}
    />
  );
}

这种模式特别适合需要动态决定子组件渲染的场景。

2. 高阶组件(HOC)模式

高阶组件是增强组件功能的强大工具：

function withDataFetching(WrappedComponent) {
  return class extends React.Component {
    state = { data: null };
    
    componentDidMount() {
      fetchData().then(data => this.setState({ data }));
    }
    
    render() {
      return <WrappedComponent {...this.props} data={this.state.data} />;
    }
  };
}

HOC的核心优势：

逻辑复用（如数据获取、权限校验等）
保持原组件纯净性
易于测试和隔离

注意事项：

HOC应在组件定义层创建，避免在render中创建
记得透传props到被包装组件

现代组合模式

1. Render Props模式

function DataProvider({ render }) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  
  return render(data);
}

// 使用
<DataProvider render={data => (
  data ? <List data={data} /> : <Loading />
)} />

2. 函数作为子组件(FaCC)

function TodoList({ todos, children }) {
  return (
    <ul>
      {todos.map((todo, i) => (
        <li key={i}>{children(todo)}</li>
      ))}
    </ul>
  );
}

// 使用
<TodoList todos={todos}>
  {todo => todo.completed ? 
    <s>{todo.text}</s> : <span>{todo.text}</span>
  }
</TodoList>

这两种模式的共同优势：