0. 前言

本篇博客主要是梳理在 React 中组件复用的方案。

详细案例见：https://wangjs-jacky.github.io/jacky-workspace-html/react18/data-flow (opens new window)

1. 复用组件方案

复用组件的方案：

• Class Component 时代
  • HOC：高阶组件
  • render props
• Hooks 时代
  • 自定义 Hooks 函数：将逻辑与 UI 完全解耦。

2. 案例分析

现在需要实现一个如下案例：

在示例代码中一共给出了五种写法：

1. 数据驱动写法

2. 使用 HOC 方式，对子组件进行渲染劫持。

   使用到的技巧是：React.children 结合 React.cloneElement 实现。

3. 使用 render props 的方案

4. 使用 render props 结合 HOC（在 render 组件的基础上再包一层 <Context.Provider>）

5. 使用 useHooks 钩子分离出逻辑的写法。

3. 从组件结构分析

此案例由两部分组件构成，假定为 <A /> 与 <B /> 组件，正常的渲染结构如下：

// 主模块
import A from "./A";
const App = ()=>{
  return (
  <A>
  </A>
  )
}

// A 组件模块
import B from "./B";
const A= ()=>{
  return (
  	<B />
    <B />
    <B />
	)
}

现要求 <A> 与 <B> 在同一模块中，则可有如下关系：

1. <B /> 作为 props.children 传入 <A />

// 主模块
import A from "./A";
import B from "./B";
const App = ()=>{
  return (
    <A>
      <B />
      <B />
      <B />
    </A>
  )
}

2. <B /> 作为属性传入 <A />

// 主模块
import A from "./A";
import B from "./B";
const App = ()=>{
  return (
    <A
      render={(xxx)=><B xxx={xxx}/>}  
    />
  )
}

3. <B /> 以 Hoc 的方式传入

import B from "./B";
import {HOC as withComponentB} from "./A";
// 使用 HOC 的形式让 A 接收组件
const A = withComponentB(<B />); // 注意：千万不要在 render 函数中构造高阶组件。
const App = ()=>{
  return <A />
}