React将组件作为参数进行传递的3种方法实例

作者：添莺_764 | 来源：互联网 | 2023-10-14 14:39

其实react组件之间传递参数是比较简单的,组件传入参数的一种方式,下面这篇文章主要给大家介绍了关于React将组件作为参数进行传递的3种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

前言

在日常的开发中，开发通用组件的机会其实并不多，尤其是在各种组件库已经遍地都是的情况下。而作为一个通用组件库的使用者，经常会看到把 React 组件作为参数传递下去的场景，每当这个时候，其实或多或少都会有一些疑问，比如：有些组件传递下去的是组件名，而有些组件传递下去的是一个箭头函数返回一个组件，而有些直接传递一个 jsx 创建好的元素，这些传递方案的适用场景如何，有什么不同，是否会导致组件的 memo 失效，是否会引发组件的不必要渲染?

本文是笔者在阅读了 antd、mui, react-select 的 api 之后，结合自己日常业务中使用的组件 api 格式，对传递一个组件作为 React 组件参数的方式的思考和总结，如果有写的不到位的，欢迎补充和指点。

大体来讲，传递组件的方式，分为三种：

传递 jsx 创建好的元素
传递组件本身
传递返回 jsx 创建好的元素的函数

下文也主要展开介绍这三种方式并结合实际场景对比这三种方案。

方式一：直接传递 jsx 创建好的元素

在 antd 的组件 api 中，最常见的方式便是这个方法，以 button 为例，有一个 icon 参数便是允许使用者传递一个经过 jsx 创建好的元素。简化后的示例如下：

function DownloadOutlined() {
    return /* icon 的实现*/;
} 

function Button({ icon, children }) {
    return 
}

function App() {
    return 
}

可以看出来，icon 直接传递了一个 jsx 创建好的组件，从而满足了用户自定义 icon 的需求。

相比于通过字符串枚举内置 icon, 给了用户更大的定制空间。

方式二：直接传递组件本身

这一用法在 antd 中很少出现，在 react-select 中比较常见。

这里为了方便还是以 Button 为例，修改下上文的 Button 组件，将其参数改为传递 DownloadOutlined 而非经过 jsx 创建好的元素

function DownloadOutlined() {
    return /* icon 的实现*/;
} 

function Button({ icon: Icon, children }) {
    return 
}

function App() {
    return 
}

通过直接传递组件本身的方式，也可将其传递给子组件进行渲染，当然，子组件渲染的地方也改成了而非上文的 {icon}。ps: 上文中由于 jsx 语法要求，将 icon 变量名改成了首字母大写的 Icon。

方式三：传递一个返回组件的函数

这一用法用 Button 示例改写如下：

function DownloadOutlined() {
    return /* icon 的实现*/;
} 

function Button({ icon, children }) {
    return 
}

function App() {
    return 
}

在这一例子中，由于传递的是个函数，那么返回值在渲染时，改成执行函数即可。

三种方案的对比

上文中分别介绍了这三种方案的实现方法，从结果来看，三种方案都能满足传递组件作为组件参数的场景。

但是在实际的场景中，往往不会这么简单，往往有更多需要考虑的情况。

情况一：考虑是否存在不必要的渲染?

三种方案下，当父组件发生渲染时，Button 组件是否会发生不必要的渲染。示例如下：

import React, { useState } from 'react';

function DownloadOutlined() {
  return icon;
}

const Button1 = React.memo(({ icon, children }) => {
  console.log('button1 render');

  return (
    
  );
});

const Button2 = React.memo(({ icon: Icon, children }) => {
  console.log('button2 render');

  return (
    
  );
});

const Button3 = React.memo(({ icon, children }) => {
  console.log('button3 render');
  return (
    
  );
});

export default function App() {
  const [count, setCount] = useState(0);
  console.log('App render');

  return (
    <>
      }>button1
      button2
       }>button3
      
    
  );
}

在该示例中，点击 render button，此时，期望的最小渲染应该是仅仅渲染 app 组件即可，Button1 - Button3 由于并未依赖 count 的变化，同时 Button1 - Button3 都通过 React.memo 进行包裹，期望的是组件不进行渲染。

实际输出如下：

可以看出，Button1 和 Button3 均进行了渲染，这是由于这两种方案下，icon的参数发生了变化，对于 Button1, , 本质是 React.createElement(DownloadOutlined), 此时将会返回一个新的引用，就导致了 Button1 参数的改变，从而使得其会重新渲染。而对于 Button3，就更加明显，每次渲染后返回的箭头函数都是新的，自然也会引发渲染。而只有方案二，由于返回的始终是组件的引用，故不会重新渲染。

要避免（虽然实际中，99%的场景都不需要避免，也不会有性能问题）这种情况，可以通过加 memo 解决。改动点如下：

export default function App() {
  const [count, setCount] = useState(0);
  console.log('App render');

  const button1Icon = useMemo(() => {
      return ;
  }, []);

  const button3Icon = useCallback(() => {
      return () => ;
  }, []);

  return (
    <>
      button1
      button2
      button3
      
    
  );
}

通过 useMemo, useCallback包裹后，即可实现 Button1, Button3 组件参数的不变，从而避免了多余的渲染。相比之下，目前看，直接传递组件本身的方案写法似乎更为简单。

实际的场景中，Icon 组件往往不会如此简单，往往会有一些参数来控制其比如颜色、点击行为以及大小等等，此时，要将这些参数传递给 Icon 组件，这也是笔者想要讨论的：

情况二：需要传递来自父组件(App)的参数的情况。

在现有的基础上, 以传递 size 到 Icon 组件为例，改造如下：

import React, { useState, useMemo, useCallback } from 'react';

// 增加 size 参数, 控制 icon 大小
function DownloadOutlined({ size }) {
  return icon;
}

// 无需修改
const Button1 = React.memo(({ icon, children }) => {
  console.log('button1 render');

  return (
    
  );
});

// 增加 iconProps，来传递给 Icon 组件
const Button2 = React.memo(({ icon: Icon, children, icOnProps= {} }) => {
  console.log('button2 render');

  return (
    
  );
});

// 无需修改
const Button3 = React.memo(({ icon, children }) => {
  console.log('button3 render');
  return (
    
  );
});

export default function App() {
  const [count, setCount] = useState(0);
  const [size, setSize] = useState(12);
  console.log('App render');
  
  // 增加size依赖
  const button1Icon = useMemo(() => {
    return ;
  }, [size]);
  
  // 增加size依赖
  const button3Icon = useCallback(() => {
    return ;
  }, [size]);

  return (
    <>
      button1
      
        button2
      
      button3
      
      
    
  );
}

通过上述改动，可以发现，当需要从 App 组件中，向 Icon 传递参数时，Button1 和 Button3 组件本身不需要做任何改动，仅仅需要修改 Icon jsx创建时的参数即可，而 Button2 的 Icon 由于渲染发生在内部，故需要额外传递 iconProps 作为参数传递给 Icon。与此同时，render按钮点击时，由于 iconProps 是个引用类型，导致触发了 Button2 的额外渲染，当然可以通过 useMemo 来控制，此处不再赘述。

接下来看情况三，当子组件(Button1 - button3)需要传递它自身内部的状态到 Icon 组件中时，需要做什么改动。

设想一个虚构的需求， Button1 - Button3 组件内部维护了一个状态，count，也就是每个组件点击的次数，而 DownloadOutlined 也接收一个参数，count, 随着 count 的变化，他的颜色会从 rbg(0, 0, 0) 变化为 rgb(count, 0, 0)。

DownloadOutlined 改动如下:

// 增加 count 参数，控制 icon 颜色
function DownloadOutlined({ size = 12, count = 0 }) {
  console.log(count);
  return (
    
      icon
    
  );
}

Button2 的改造(Button1放在最后)如下:

const Button2 = React.memo(({ icon: Icon, children, icOnProps= {} }) => {
  console.log('button2 render');
  const [count, setCount] = useState(0);

  return (
    
  );
});

Button3的改造如下：

const Button3 = React.memo(({ icon, children }) => {
  console.log('button3 render');
  const [count, setCount] = useState(0);

  return (
    // 此处为了放大颜色的改变，点击一次加 40
    
  );
});

相应的，App 组件传入也需要做改动

export default function App() {
  /* 省略 */
  
  const button3Icon = useCallback((props) => {
    // 接收参数并将其传递给icon组件
    return ;
  }, [size]);

  /* 省略 */
}

而对于 button1, 由于 icon 渲染的时机，是在 App 组件中，而在 App 组件中，获取 Button1 组件内部的状态并不方便(可以通过 ref，但是略显麻烦)。此时可以借助 React.cloneElement api来新建一个 Icon 组件并将子组件参数注入，改造如下：

const Button1 = React.memo(({ icon, children }) => {
  console.log('button1 render');
  const [count, setCount] = useState(0);
  // 借助 cloneElement 向icon 注入参数
  const newIcon = React.cloneElement(icon, {
    count,
  });

  return (
    
  );
});

从这个例子可以看出，如果传入的组件(icon)，需要获取即将传入组件(Button1, Button2, Button3)内部的状态，那么直接传递 jsx 创建好的元素，并不方便，因为在父组件(App)中获取子组件(Button1)内部的状态并不方便，而直接传递组件本身，和传递返回 jsx 创建元素的函数，前者由于元素真正的创建，就是发生在子组件内部，故可以方便的获取子组件状态，而后者由于是函数式的创建，通过简单的参数传递，即可将内部参数传入 icon 中，从而方便的实现响应的需求。

总结

本文先简单介绍了三种将组件作为参数传递的方案：

传递 jsx 创建好的元素: icon = {}
传递组件本身: icon={Icon}
传递返回 jsx 创建好的元素的函数: icon={() => }

接下来，从三个角度对其进行分析：

是否存在不必要的渲染
Icon 组件需要接收来自父组件的参数
Icon 组件需要接收来自子组件的参数

其中，三种方案，在不做 useMemo, useCallback 这样的缓存情况下，直接传递组件本身，由于引用不变，可以直接避免非必要渲染，但是当需要接收来自父组件的参数时，需要开辟额外的字段 iconProps 来接收父组件的参数，在不做缓存的情况下，由于参数的对象引用每次都会更新从而也存在不必要渲染的情况。当然，这种不必要的渲染，在绝大部分场景下，并不会存在性能问题。

考虑了来自父组件的传参后，除了方案二直接传递组件本身的方案需要对子组件增加 iconProps 之外，其余两个方案由于 jsx 创建组件元素的写法本身就在父组件中，只需稍作改动即可将参数携带入 Icon 组件中。

而当需要接收来自子组件的参数场景下，方案一显得略有不足，jsx 的创建在父组件已经创建好，子组件中需要注入额外的参数相对麻烦(使用 cloneElement 实现参数注入)。而方案三由于函数的执行时机是在子组件内部，可以很方便的将参数通过函数传参带入 Icon 组件，可以很方便的满足需求。

从实际开发组件的场景来看，被作为参数传递的组件需要使用子组件内部参数的，一般通过方案三传递函数的方案来设计，而不需要子组件内部参数的，方案一二三均可，实际的开销几乎没有差异，只能说方案一写法较为简单，也是 antd 的 api 中最常见的用法。而方案三，多见于需要子组件内部状态的情况，比如 antd 的面包屑 itemRender，Form.list的 children 的渲染，通过函数注入参数给被作为参数传递的组件方便灵活的进行渲染。

最后，由于笔者之前写过一段时间vue，不免还是想到了 vue 中 slot 的写法，说实话，还是回去翻了下文档，其实就是方案一和方案三的合集，由于slot本身是在父组件渲染的，所以直接具备父组件的作用域，能够访问父组件的状态，需要注入父组件参数的，直接在插槽的组件中使用即可，而作用域插槽便是提供子组件的作用域，使插槽中的组件可以获取到子组件的参数。

到此这篇关于React将组件作为参数进行传递的3种方法的文章就介绍到这了,更多相关React组件作参数传递内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

推荐阅读

export
HTML5与JavaScript实现本地文件读取、写入及路径获取

本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作，并介绍了获取本地文件路径的方法。HTML5提供了一系列API，使得这些操作变得更加简便和安全。 ... [详细]

蜡笔小新 2024-12-20 18:36:06
export
深入理解Vue.js：从入门到精通

本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例，帮助开发者全面掌握这一流行的前端框架。 ... [详细]

蜡笔小新 2024-12-22 11:07:54
export
如何在 Angular 6 HttpClient 中获取响应头

本文介绍如何使用 Angular 6 的 HttpClient 模块来获取 HTTP 响应头，包括代码示例和常见问题的解决方案。 ... [详细]

蜡笔小新 2024-12-22 15:33:55
export
云函数与数据库API实现增删查改的对比

本文将深入探讨使用云函数和数据库API实现数据操作（增删查改）的不同方法，通过详细的代码示例帮助读者更好地理解和掌握这些技术。文章不仅提供代码实现，还解释了每种方法的特点和适用场景。 ... [详细]

蜡笔小新 2024-12-22 00:56:21
export
黑马头条项目：Vue 文章详情模块与交互功能实现

本文详细介绍了如何在黑马头条项目中配置文章详情模块的路由、获取和展示文章详情数据，以及实现关注、点赞、不喜欢和评论功能。通过这些步骤，您可以全面了解如何开发一个完整的前端文章详情页面。 ... [详细]

蜡笔小新 2024-12-21 19:23:01
export
深入解析 Android IPC 中的 Messenger 机制

本文详细介绍了 Android 中基于消息传递的进程间通信（IPC）机制——Messenger。通过实例和源码分析，帮助开发者更好地理解和使用这一高效的通信工具。 ... [详细]

蜡笔小新 2024-12-21 11:11:40
eval
SQL Server 中 INSERT 语句无法插入数据的问题分析与解决

本文探讨了在 SQL Server 中使用 JDBC 插入数据时遇到的问题。通过详细分析代码和数据库配置，提供了解决方案并解释了潜在的原因。 ... [详细]

蜡笔小新 2024-12-21 09:52:27
io
[Vue.js 3.0] Guide – Scaling Up – State Management

[Vue.js 3.0] Guide – Scaling Up – State Management ... [详细]

蜡笔小新 2024-12-19 17:37:14
eval
ReactJS 计算器应用：增加功能

本文将指导如何向ReactJS计算器应用添加必要的功能，使其能够响应用户操作并正确计算数学表达式。 ... [详细]

蜡笔小新 2024-12-19 13:09:18
get
如何在React项目中将子组件的数据传递给父组件

本文探讨了在React项目中实现子组件向父组件传递数据的方法，包括通过回调函数和使用React状态管理工具。 ... [详细]

蜡笔小新 2024-12-18 17:47:48
input
JavaScript前端开发中常用的四种继承方法详解

本文深入探讨了JavaScript中实现继承的四种常见方法，包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说，理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]

蜡笔小新 2024-12-18 11:08:28
import
基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发

本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]

蜡笔小新 2024-12-22 15:31:28
shell
提升代码可读性的关键要素

本文总结了优化代码可读性的核心原则与技巧，通过合理的变量命名、函数和对象的结构化组织，以及遵循一致性等方法，帮助开发者编写更易读、维护性更高的代码。 ... [详细]

蜡笔小新 2024-12-22 02:51:51
import
Java 中的年月组合方法

本文介绍 Java 中如何使用 Year 类的 atMonth 方法将年份和月份组合成 YearMonth 对象，并提供代码示例。 ... [详细]

蜡笔小新 2024-12-21 18:30:49
get
优化Flask应用的并发处理：解决Mysql连接过多问题

本文探讨了在Flask应用中通过优化后端架构来应对高并发请求，特别是针对Mysql 'too many connections' 错误的解决方案。我们将介绍如何利用Redis缓存、Gunicorn多进程和Celery异步任务队列来提升系统的性能和稳定性。 ... [详细]

蜡笔小新 2024-12-21 09:21:49