React中children属性接收函数的模式名称及相关问题咨询

一、模式名称 #

这种模式最常用的名称是函数作为子组件（Function as Child Component，简称FaCC），它属于**渲染属性（Render Props）**模式的特殊分支——Render Props泛指组件通过某个prop（可以是render、children等）接收函数来动态控制子组件渲染逻辑，而FaCC特指将函数放在children属性中传递。

二、适用场景 #

• 共享状态与逻辑：像Formik这类工具库，把表单的状态管理、事件处理逻辑封装在父组件内，通过函数将values、handleSubmit等数据和方法传递给子组件，避免手动层层传递props的繁琐。
• 动态渲染控制：父组件可根据自身状态或业务逻辑，向子组件传递动态数据，让子组件自主决定渲染内容。比如弹窗组件可以传递关闭函数给内部按钮，同时控制弹窗的显示状态。
• 复用复杂逻辑：将数据请求、加载状态、错误处理这类通用逻辑封装到组件中，通过函数把请求结果、状态传递给子组件，子组件只需专注UI展示，不用重复编写逻辑代码。
• 替代高阶组件（HOC）：HOC会导致组件嵌套层级加深，FaCC能让组件结构更扁平化，减少嵌套带来的复杂度。

三、是否属于反模式？ #

它不是反模式，但使用时需注意几个问题：

• 性能优化：如果每次渲染都创建新函数作为children，会导致子组件频繁不必要重渲染，建议用useCallback缓存函数。
• 代码可读性：多层函数嵌套会让代码晦涩，复杂场景下可结合React Hooks或Context API简化。
• 类型定义：在TypeScript中，需专门定义children为函数类型，比普通组件的类型处理稍复杂。

示例代码（来自Formik官方文档） #

<Formik>
  {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name &&
        <div>
          {errors.name}
        </div>}
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

内容的提问来源于stack exchange，提问作者Andrew Hulterstrom