开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React:直接导入子组件而不是作为依赖项传入是不是一种糟糕的做法？

React是一个用于构建用户界面的JavaScript库。在React中，组件是构建用户界面的基本单位，可以将一个大的界面拆分成多个小的可复用的组件。

在React中，通常使用props（属性）来传递数据和方法给子组件。父组件可以将子组件作为依赖项传入，并通过props将数据传递给子组件。这种做法有以下几个优势：

显式依赖关系：通过将子组件作为依赖项传入，可以清晰地看到子组件所依赖的数据和方法来自于哪个父组件，方便维护和理解代码。
组件解耦：将子组件作为依赖项传入可以使子组件更加独立，不依赖于特定的父组件。这样可以提高组件的复用性和可测试性。
灵活性：通过props传递数据和方法可以使父组件在不同的场景下动态地改变子组件的行为和显示内容。

然而，直接导入子组件而不是作为依赖项传入也有一些特定的应用场景和优势：

简化代码：在某些情况下，如果子组件只需要使用父组件的一小部分数据或方法，直接导入子组件可以简化代码，减少不必要的传递。
性能优化：如果子组件需要频繁地更新，而且只依赖于父组件的一小部分数据，直接导入子组件可以避免不必要的父组件渲染，提高性能。

总的来说，直接导入子组件而不是作为依赖项传入可以在某些特定场景下简化代码和提高性能。但在大多数情况下，作为依赖项传入子组件是更好的做法，因为它能够提供更好的可维护性、可测试性和组件解耦。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
腾讯云移动开发平台（移动开发套件）：https://cloud.tencent.com/product/mobdevsuite
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙服务（Tencent Spatial Computing）：https://cloud.tencent.com/product/tsc

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

高级工程师的晋升之路：如何用 JavaScript 打造十亿级的应用

我以前开发过超大规模的JavaScript应用。现在我不做了，所以我觉得应该回顾下我学到的东西。昨天我在宴会上喝啤酒时有人问我，“嗨Malte，你为什么要来讲这个话题？”

02

React应用优化：避免不必要的render

React在组件的生命周期方法中提供了一个钩子shouldComponentUpdate，这个方法默认返回true，表示需要重新执行render方法并使用其返回的结果作为新的Virtual DOM节点。通过实现这个方法，并在合适的时候返回false，告诉React可以不用重新执行render，而是使用原有的Virtual DOM 节点，这是最常用的避免render的手段，这一方式也常被很形象地称为“短路”（short circuit）。

02

React Hook实践总结

最近一年几乎都在使用 TypeScript + Hooks 编写函数式组件，这一篇是我使用 hooks 的一些总结。

02

从React源码角度看useCallback，useMemo，useContext

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

03

性能：React 实战优化技巧

🌿 性能优化的主要点： 1️⃣ 减少 DOM 的渲染频次 2️⃣ 减少 DOM 的渲染范围 3️⃣ 非必要的内容延后处理

00

Redux with Hooks

React在16.8版本为我们正式带来了Hooks API。什么是Hooks？简而言之，就是对函数式组件的一些辅助，让我们不必写class形式的组件也能使用state和其他一些React特性。按照官网的介绍，Hooks带来的好处有很多，其中让我感受最深的主要有这几点：

06

vue和react的区别

React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更加鲁棒。

03

React组件设计实践总结02 - 组件的组织

一个复杂的应用都是由简单的应用发展而来的, 随着越来越多的功能加入项目, 代码就会变得越来越难以控制. 本文章主要探讨在大型项目中如何对组件进行组织, 让项目具备可维护性.

03

前端-关于 Vue 和 React 区别的一些笔记

这篇文章记录我在使用Vue和React的时候，对他们的不同之处的一些思考，不仅局限于他们本身，也会包括比如 Vuex/Redux 等经常搭配使用的工具。因为涉及到的内容很多，可能下面的每一个点都能写成一篇文章，这次先简单做一个概要，等我有空做一个详细的专题出来。

04

宝啊～来聊聊 9 种 React Hook

文章会为你讲述 React 9种 Hook 的日常用法以及进阶操作，从浅入深彻底掌握 React Hook！

02

多应用聚合实践

在企业中，各个研发部门往往各自开发自己的应用。当需要把这些应用聚合在一起时。以往的解决方案是在主应用中嵌入 iframe，使用 iframe 加载和切换子应用页面。这种做法有几个缺点：

02

react hooks 全攻略

React Hooks 是 React 提供的一种功能，允许我们在函数组件中使用状态和其他 React 特性。使用 Hooks 可以简化函数组件中的状态管理和副作用处理。

04

React源码之useCallback，useMemo，useContext

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

02

从React源码看useCallback，useMemo，useContext

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

03

从React源码角度看useCallback，useMemo，useContext

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

01

从React源码角度看useCallback，useMemo，useContext_2023-02-28

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

05

从React源码角度看useCallback，useMemo，useContext

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

04

从React源码角度看useCallback，useMemo，useContext_2023-02-07

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

03

React组件复用的方式

现前端的工程化越发重要，虽然使用Ctrl+C与Ctrl+V同样能够完成需求，但是一旦面临修改那就是一项庞大的任务，于是减少代码的拷贝，增加封装复用能力，实现可维护、可复用的代码就变得尤为重要，在React中组件是代码复用的主要单元，基于组合的组件复用机制相当优雅，而对于更细粒度的逻辑(状态逻辑、行为逻辑等)，复用起来却不那么容易，很难把状态逻辑拆出来作为一个可复用的函数或组件，实际上在Hooks出现之前，都缺少一种简单直接的组件行为扩展方式，对于Mixin、HOC、Render Props都算是在既有(组件机制的)游戏规则下探索出来的上层模式，一直没有从根源上很好地解决组件间逻辑复用的问题，直到Hooks登上舞台，下面我们就来介绍一下Mixin、HOC、Render Props、Hooks四种组件间复用的方式。

01

React系列-轻松学会Hooks

❗️❗️HOC、Render Props 等基于组件组合的方案，相当于先把要复用的逻辑包装成组件，再利用组件复用机制实现逻辑复用。自然就受限于组件复用，因而出现扩展能力受限、Ref 隔断、Wrapper Hell……等问题

02

如何使用 Router 为你页面带来更快的加载速度

React-Router 在 6.4 版本中 Release 了一系列 loaderFunction、defer 等 Data Apis，将数据获取和页面渲染进行分离从而带来更好的用户体验。

01

React-Hook最佳实践

Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性，无需转化成类组件

03

解密传统组件间通信与React组件间通信

在React中最小的逻辑单元是组件，组件之间如果有耦合关系就会进行通信，本文将会介绍React中的组件通信的不同方式

01

作为一个菜鸟前端开发，面了20+公司之后整理的面试题

在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。

03

React高手都善于使用useImprativeHandle

在 React Hooks 中，useImperativeHandle 是一个非常简单的 hook，他比较小众，刚开始接触 React 学习的朋友可能并不熟悉他。不过对于 React 顶尖高手而言，这是非常重要的 Hook，他能让我们对 React 的使用变得更加得心应手。应对更多更复杂的场景。

01

我们编写 React 组件的最佳实践

刚接触的时候，在一个又一个的教程上面看到很多种编写组件的方法，尽管那时候框架已经相当成熟，但是并没有一个固定的规则去规范我们去写代码。在过去的一年里，我们在不断的完善我们的做法，直到满意为止。本文会列出我们自己在使用的最佳实践，不管你是刚入门的新手还是很有经验的开发者，我们都希望本文对你有所帮助。开始之前，先列几条：我们使用ES6/ES7 如果你无法区分页面组件和容器组件，推荐阅读这篇文章如果有更好的意见或建议，请在评论区告诉我，谢谢基于 Class 的组件基于 Class 的组

07

你需要的react面试高频考察点总结

函数式组件(Functional component)根本没有实例instance。类组件(Class component)有实例instance，但是永远也不需要直接创建一个组件的实例，因为React帮我们做了这些。

03

React 组件性能优化——function component

1. 前言函数式组件是一种非常简洁的数据驱动 UI 的实现方式。如果将 React 组件拆分成三个部分 —— 数据、计算和渲染，我们可以看到性能优化的几个方向。数据：利用缓存，减少 rerender 的次数计算：精确判断更新时机和范围，减少计算量渲染：精细粒度，降低组件复杂度今天主要分享数据层面的性能优化技巧。 1.1. 有什么是 Hook 能做而 class 做不到的？在学习 React hook api 的过程中，发现其相比类组件的生命周期，更加抽象且灵活。在 React 官方文档的 FA

01

干货 | 携程活动搭建平台的前端“开放性”建设探索

作者简介 Jackie，携程前端开发，关注组件化开发，低代码式建设，致力于通过前端技术解决现实问题。乐高系统是携程市场研发部开发的活动搭建平台，主要满足运营所需的各种营销、广告、频道、定制等页面的快速灵活搭建。平台在自身发展的过程中不断改进。刚开始着力于满足运营配置需求，满足业务需求，不断扩充和丰富组件库，目前平台已配置了10000+ 有效页面，同时在线页面达到1000+，组件类型300+。当体量达到一定程度后，我们又在思考，平台能力的边界在哪里，如何推动平台创造更大的价值？这个时候，建设平台不再局限

02

React 组件性能优化——function component

函数式组件是一种非常简洁的数据驱动 UI 的实现方式。如果将 React 组件拆分成三个部分 —— 数据、计算和渲染，我们可以看到性能优化的几个方向。

01

构建面向未来的前端架构

所以，今天我们来通过一些例子来探讨如何在前端项目中如何做到在性能和架构方面做一个合理的配置和权衡处理。在讨论问题的同时，也会附带一些针对性的解决方案。让你在遇到一个类似问题时，不至于“抓耳挠腮”。

01

React中的高阶组件

高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧，HOC自身不是React API的一部分，它是一种基于React的组合特性而形成的设计模式。

01

怎样对react，hooks进行性能优化？

现在越来越多人开始使用 React Hooks + 函数组件的方式构筑页面。函数组件简洁且优雅，通过 Hooks 可以让函数组件拥有内部的状态和副作用（生命周期），弥补了函数组件的不足。

05

你不知道的 React 最佳实践

React 是一个用于开发用户界面的 JavaScript 库，是由 Facebook 在 2013 年创建的。 React 集成了许多令人兴奋的组件、库和框架[1]。当然，开发人员也可以自己开发组件。

01

React常见面试题

动态加载（异步组件）加载时会有延迟，在延迟期间可以将一些内容展示给用户，比如：loading

02

React16之useCallback、useMemo踩坑之旅

背景 react性能优化的一个主要方向就是减少组件重复渲染，避免没有必要的渲染以提升性能，而减少组件重复渲染的重要方式就是利用缓存。根据这个思路react推出了React.memo、hook函数useCallback、useMemo等方法，但官方文档也提出不要滥用这些hook，不然很有可能适得其反，那具体怎么使用才能提高性能呢？在开始之前先简单介绍下Memoization的概念，在密集型操作中通过将初始的操作结果‘缓存’起来,并在下一次操作中利用缓存来加速计算的技术。换人话就是通过对象把函数每次执行的

02

React组件详解

众所周知，组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。所谓无状态组件，就是没有状态控制的组件，只做纯静态展示的作用，无状态组件是最基本的组件形式，它由属性props和渲染函数render构成。由于不涉及到状态的更新，所以这种组件的复用性也最强。有状态组件是在无状态组件的基础上增加了组件内部状态管理，有状态组件通常会带有生命周期lifecycle，用以在不同的时刻触发状态的更新，有状态组件被大量用在业务逻辑开发中。

02

React-hooks面试考察知识点汇总

React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。有一些解决此类问题的方案，比如 render props 和高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。

02

React中组件间通信的方式

props适用于父子组件的通信，props以单向数据流的形式可以很好的完成父子组件的通信，所谓单向数据流，就是数据只能通过props由父组件流向子组件，而子组件并不能通过修改props传过来的数据修改父组件的相应状态，所有的props都使得其父子props之间形成了一个单向下行绑定，父级props的更新会向下流动到子组件中，但是反过来则不行，这样会防止从子组件意外改变父级组件的状态，导致难以理解数据的流向而提高了项目维护难度。实际上如果传入一个基本数据类型给子组件，在子组件中修改这个值的话React中会抛出异常，如果对于子组件传入一个引用类型的对象的话，在子组件中修改是不会出现任何提示的，但这两种情况都属于改变了父子组件的单向数据流，是不符合可维护的设计方式的。我们通常会有需要更改父组件值的需求，对此我们可以在父组件自定义一个处理接受变化状态的逻辑，然后在子组件中如若相关的状态改变时，就触发父组件的逻辑处理事件，在React中props是能够接受任意的入参，此时我们通过props传递一个函数在子组件触发并且传递值到父组件的实例去修改父组件的state。

03

React-hooks面试考察知识点汇总

React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。有一些解决此类问题的方案，比如 render props 和高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。

04

React Hooks 性能优化，带你玩转 Hooks

React Hooks 出来很长一段时间了，相信有不少朋友已经深度使用了。无论是react本身还是其生态中,都在摸索着进步。鉴于我使用react的经验，给大家分享一下 React Hooks性能优化可以从哪几个方面入手。至于React Hooks 的使用方式，本文就不做过多的讲解了，可以自行查看https://react.docschina.org/docs/hooks-intro.html

03

来自 React 19 的背刺：forwardRef 被无情抛弃

在之前的版本中，forwardRef 一直是我最爱用的 ref 之一。它在封装组件时非常有用。可是万万没想到，由于使用方式稍微麻烦了一点，在新的版本中，直接被 React 19 背刺一刀，实现同样的功能，以后可以不用它了.... forwardRef 被无情抛弃。

01

React框架 Hook API

如果你刚开始接触 Hook，那么可能需要先查阅 Hook 概览。你也可以在 Hooks FAQ 章节中获取有用的信息。

00

[OHIF-Viewers]医疗数字阅片-医学影像-REACT-Hook API索引

如果你刚开始接触 Hook，那么可能需要先查阅 Hook 概览。你也可以在 Hooks FAQ 章节中获取有用的信息。

03

143. 精读《Suspense 改变开发方式》

很多人都用过 React Suspense，但如果你认为它只是配合 React.lazy 实现异步加载的蒙层，就理解的太浅了。实际上，React Suspense 改变了开发规则，要理解这一点，需要作出思想上的改变。

02

加速 Vue.js 开发过程的工具和实践

在本文中，我们将着眼于应该采用的实践，应该避免的事情，并仔细研究一些有助于编写 Vue.js 的有用工具。我将主要关注 Vue 2，因为大多数人和组织仍在使用旧版本。不过不用担心，因为这里提到的大多数内容仍然适用于 Vue 3，因为它只是一个增压和更快的版本。不过，如果您已经了解 Vue 2 并且只想了解 Vue 3 中的新功能，那么您可以查看迁移指南以了解更多信息。

09

React 进阶 - Ref

ref 对象就是用 createRef 或者 useRef 创建出来的对象，一个标准的 ref 对象应该是如下的样子：

01

【译】编写高质量JavaScript模块的4个最佳实践

使用ES2015模块，您可以将应用程序代码分成可重用的、封装的、专注于单一任务的模块。

02

谈一谈我对React Hooks的理解

在React中有非常多的Hooks，其中useEffect使用非常频繁，针对一些具有副作用的函数进行包裹处理，使用Hook的收益有：增强可复用性、使函数组件有状态

02

React 进阶 - 渲染控制

对于 React 渲染，不要仅仅理解成类组件触发 render 函数，函数组件本身执行，事实上，从调度更新任务到调和 fiber，再到浏览器渲染真实 DOM，每一个环节都是渲染的一部分，至于对于每个环节的性能优化，React 在底层已经处理了大部分优化细节，包括设立任务优先级、异步调度、diff 算法、时间分片都是 React 为了提高性能，提升用户体验采取的手段。开发者只需要告诉 React 哪些组件需要更新，哪些组件不需要更新。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭