开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在React组件中使用getter呈现另一个组件是一种好的做法吗？

在React中，使用getter来呈现另一个组件并不是一种常见的做法。通常情况下，我们会在组件的render方法中直接返回要呈现的组件。

使用getter来呈现另一个组件可能会导致以下问题：

可读性降低：使用getter来呈现组件会增加代码的复杂性，降低代码的可读性。其他开发人员在阅读代码时可能会感到困惑。
性能影响：使用getter来呈现组件可能会导致不必要的重新渲染。React组件的渲染是基于其props和state的变化，如果getter的返回值没有发生变化，但getter本身被调用了，那么组件将会重新渲染，这可能会影响性能。
组件复用性降低：使用getter来呈现组件会使得该组件的复用性降低。因为getter通常是与特定的数据结构或业务逻辑相关联的，如果其他组件想要使用该组件，就需要了解并满足这些特定的要求。

综上所述，一般情况下不建议在React组件中使用getter来呈现另一个组件。相反，应该直接在render方法中返回要呈现的组件，以提高代码的可读性、性能和组件的复用性。

如果您对React组件的使用有更多的疑问，可以参考腾讯云的React相关文档和教程，链接地址：https://cloud.tencent.com/document/product/1131

相关搜索:为软件创建不同的可执行组件是一种好的做法吗？使用for循环运行异步函数是一种好的做法吗？使用Ref在模板文字中呈现React组件使用嵌套的for循环是一种好的做法吗？可以在React Native中动态呈现组件吗？同时使用样式组件和css模块是一种做法吗？在Django Rest框架中覆盖list()是一种好的做法吗？在python中手动退出线程是一种好的做法吗？在ReactJS中使用onClick中的return是一种好的做法吗？在react中呈现嵌套组件的数组

相关搜索:

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

有帮助

没帮助

相关·内容

在 React 和 Vue 中尝鲜 Hooks

新鲜的 React Hooks 在 React v16.7.0-alpha 版本中，React 正式引入了新特性 Hooks，其定义为： Hooks 是一种新特性，致力于让你不用写类也能用到 state...随之而来的一些问题是：组件往往变得嵌套过多各种写法的组件随着逻辑的增长，都变得难以理解尤其是基于类写法的组件中，this 关键字暧昧模糊，人和机器读起来都比较懵难以在不同的组件直接复用基于 state...可以使用内建或自定义的 Hooks 在不同组件之间复用、甚至在同一组件中多次复用基于 state 的逻辑。...Hooks 在类内部不起作用，官方也并不建议马上开始重写现有的组件类，但可以在新组件中开始使用。...在 Hooks 中的方案是使用 useEffect 方法，这相当于告诉 React 在每次更新变化到 DOM 后，就调用这些副作用；React 将在每次（包括首次）render() 后执行这些逻辑。

4.2K1 0

读书笔记《React-引领未来的用户界面开发框架》

废话篇这部分内容，人云亦云垂直切分的组件 React对于配置多名前端开发的团队，在协作上有一定的优势。其组件化思路，是一种垂直划分，每个组件高度自治。...使用JSX来定义组件结构，通过Sytle对象来inline样式属性。这里有两个不爽的地方。...高能篇这部分脑洞比较大论setter、getter的重要性一个好框架\库，需要有一个统一的输入输出接口在React里面，有一个很重要的概念，是一切改变，都必须通过setState()方法来传达。...React也有很多钩子，他强调的生命周期，其实就是一系列的钩子，给业务能非常容易的在想定制拓展的地方进行定制拓展。 Backbone有钩子吗？...Marionette则弥补了Backbone.View在钩子上面的缺失，可惜太小众。钩子要怎么做？简单来说就是在框架、库的生命周中埋下大量空函数供拓展的时候覆盖就好了。未完待续

5260 0

必会vue面试题（附答案）

keep-alive 的中还运用了 LRU(最近最少使用) 算法，选择最近最久未使用的组件予以淘汰。能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？...，react更快 3.使用场景：React配合Redux架构适合大规模多人协作复杂项目，Vue适合小快的项目 4.开发风格：react推荐做法jsx + inline style把html和css都写在...js了 vue是采用webpack + vue-loader单文件组件格式，html, js, css同一个文件Vue模版编译原理知道吗，能简单说一下吗？...生命周期钩子是如何实现的Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好（内部采用数组的方式存储）然后在创建组件实例的过程中会一次执行对应的钩子方法（发布）相关代码如下...所以在 vm._render() 过程中，会触发所有数据的 getter，这样便已经完成了一个依赖收集的过程。

1.1K4 0

深入React

，多出来的部分是自定义组件（Wrapper）结构上，内部树布局是森林，维护在instancesByReactRootID：现有app引入React时，会有多个root DOM node 纯React...setter getter setter监听变化 Vue 提供数据模型解析模版所有数据操作都走框架API，通知变化 Ember 脏检查解析模版在合适的时机，取最新的值和上次的比较，检查变化 Angular...组件间远距离通信问题没有好的解决方案 另一个问题是在复杂应用中，状态变化（setState）散落在各个组件中，逻辑过于分散，存在维护上的问题 Flux 为了解决状态管理的问题，提出了Flux模式，目标是让数据可预测...基本思路 (state, action) => state 具体做法用显式数据，不用衍生数据（先声明后使用，不临时造数据）分离数据和视图状态（把数据层抽出来）避免级联更新带来的级联影响（M与V之间互相影响...container container是一种特殊的组件，不含视图逻辑，与store关系紧密。

1.2K5 0

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

但是在 React 中我们都是使用回调函数的，这可能是他们二者最大的区别。...模板渲染方式的不同在表层上，模板的语法不同 1、React 是通过JSX渲染模板 2、而Vue是通过一种拓展的HTML语法进行渲染但其实这只是表面现象，毕竟React并不必须依赖JSX。...在深层上，模板的原理不同，这才是他们的本质区别： 1、React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的 2、Vue是在和组件JS代码分离的单独的模板中...举个例子，说明React的好处： react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。...但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

5.3K4 0

vue和react的区别

React 本身并不支持自定义事件，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数，但Vue更倾向于使用事件。在React中我们都是使用回调函数的，这可能是他们二者最大的区别。...而Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现对这一点，这样的做法显得有些独特，会把HTML弄得很乱。...举个例子，说明React的好处：react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。...但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。...Redux在检测数据变化的时候，是通过diff的方式比较差异的，而Vuex其实和Vue的原理一样，是通过getter/setter来比较的，这两点的区别，也是因为React和Vue的设计理念不同。

6513 0

使用 useState 需要注意的 5 个问题

众所周知，hook 在 React 组件开发中变得越来越重要，特别是在功能组件中，因为它们已经完全取代了对基于类的组件的需求，而基于类的组件是管理有状态组件的传统方式。...然而，没有人直接告诉你的是，根据组件在该状态下的期望，使用错误的类型值初始化 useState 可能会导致应用程序中意外的行为，例如无法呈现 UI，导致黑屏错误。...： image.png 对于这个错误和 UI 未呈现的典型解决方案是使用条件检查来验证状态的存在性，在呈现组件之前检查它是否可访问，例如 user.names && user.names.firstname...但是，直接更新状态是一种不好的做法，在处理多个用户使用的实时应用程序时可能会导致潜在的错误。为什么？因为与你所想的相反，React 不会在单击按钮时立即更新状态。...更新特定对象属性 另一个常见错误是只修改对象或数组的属性而不修改引用本身。例如，我们用定义好的 name 和 age 属性初始化一个用户对象。

4.9K2 0

怎样开发可重用组件并发布到NPM

另一种方法是复制并粘贴标记，并只对样式和 javascript 使用NPM。这是英国“金融时报”在 Origami 组件库【http://origami.ft.com/】中用到的方法。...组件的使用者可以在这些升级中受益，无需手动修改项目代码。只需要通过在终端的敲出简短的 npm update 命令，就可以在项目范围内更新到最新版本。当然前提是组件的名称及其 API 需要保持一致。...在CodePen上的代码演示：https://codepen.io/cssgrid/pen/KemvbM 在前端开发中，以组件为中心的方法已经变得无处不在，Facebook 的 React 框架就使用了这种方法...通过使用原生 Web 平台的标准部分，我们确保自己的组件能够在前端重组和不断重构的快速变化周期中生存下来。 Web组件可以与任何一种模板语言和前端框架一起使用 —— 它们是真正交叉兼容和可互操作的。...即使不是有效的HTML元素，它的内容也会被呈现。并没有一个很好的理由这样做 —— 偏离标准化标签在传统上是很差劲的做法。

1.1K2 0

2020年，需要了解 Vue3 的哪些知识

现在可以在Vue中使用 Suspense Suspense是React的一个功能，现已在Vue3中引入。Suspense 让组件“等待”某个异步操作，直到该异步操作结束即可渲染。...… Fragment 在Vue 3中，我们可以期待的另一个令人兴奋的补充是Fragment。...DOM元素，但它是虚拟的，根本不会在DOM树中呈现。...Portals Portals是一种特殊的组件，目的是在当前组件之外渲染某些内容。这也是React中原生实现的功能之一。下面是 React 文档中关于portals的说法。...Portals 提供了一种第一流的方式，可以将子节点渲染到父组件的DOM层次结构之外的DOM节点中。这是一种非常好的处理modals、弹出窗口和一般要出现在页面顶部的组件的方式。

1.4K1 0

React 面试必知必会 Day8

大家好，我是洛竹?，一只住在杭城的木系前端?，如果你喜欢我的文章?，可以通过点赞帮我聚集灵力⭐️。...安装中的生命周期方法的顺序是什么？当一个组件的实例被创建并插入到 DOM 中时，生命周期方法按以下顺序被调用。...在 React v16 中，有哪些生命周期方法将被废弃？以下生命周期方法将是不安全的编码做法，在异步渲染中会出现更多问题。...Hooks 是否取代了渲染 props 和高阶组件？渲染 props 和高阶组件都只渲染一个 children，但在大多数情况下，Hooks 是一种更简单的方式，通过减少树中的嵌套来达到这个目的。...推荐用什么方式来命名组件？建议通过引用来命名组件，而不是使用 displayName。使用 displayName 来命名组件。

2.4K4 0

为什么 RSC 才是正确答案？

这个重要的阶段称为水合作用，是最初由服务器提供的静态页面被赋予生命的阶段。在水合过程中，React 控制浏览器，根据所提供的静态 HTML 重建内存中的组件树。它仔细规划了树中交互元素的放置。...此过程可能会低效地消耗资源并延长加载时间和用户交互时间，因为他们的设备需要处理和呈现甚至可能不需要客户端交互的组件。这引出了另一个问题：所有组件都应该水合吗，即使是那些不需要交互性的组件？...这引出了另一个重要问题：这么多工作应该在用户的设备上完成吗？为了应对这些挑战，仅仅采取渐进的步骤是不够的。我们需要迈向更强大的解决方案的重大飞跃。...在浏览器中，Next.js处理流式的 React 响应。React 使用 RSC 有效负载和客户端组件指令来逐步渲染 UI。加载所有客户端组件和服务器组件的输出后，将向用户显示最终的 UI 状态。...Js 中 App Router 的 RSC 渲染生命周期的本质。在 React 服务器组件架构中，服务器组件负责数据获取和静态渲染，而客户端组件的任务是渲染应用程序的交互元素。

1961 0

感觉最近vue相关面试题回答的不好，那就总结一下吧

谈谈Vue和React组件化的思想1.我们在各个页面开发的时候，会产生很多重复的功能，比如element中的xxxx。...keep-alive 的中还运用了 LRU(最近最少使用) 算法，选择最近最久未使用的组件予以淘汰。vue和react的区别=> 相同点：1. 数据驱动页面，提供响应式的试图组件2....，react更快 3.使用场景：React配合Redux架构适合大规模多人协作复杂项目，Vue适合小快的项目 4.开发风格：react推荐做法jsx + inline style把html和css都写在...computed:computed是计算属性,也就是计算值,它更多用于计算值的场景computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取...Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。

1.3K3 0

年前端react面试打怪升级之路

主要解决的问题：单纯的Redux只是一个状态机，是没有UI呈现的，react- redux作用是将Redux的状态机和React的UI呈现绑定在一起，当你dispatch action改变state的时候...React中有使用过getDefaultProps吗？它有什么作用？...另外一种情况则是需要获取DOM元素状态，但是由于在fber中，render可打断，可能在wilMount中获取到的元素状态很可能与实际需要的不同，这个通常可以使用第二个新增的生命函数的解决 getSnapshotBeforeUpdate..., 为了性能等考虑, 尽量在constructor中绑定事件对 React Hook 的理解，它的实现原理是什么React-Hooks 是 React 团队在 React 组件开发实践中，逐渐认知到的一个改进点...通过上面的区别，我们不能说谁好谁坏，它们各有自己的优势。在 React-Hooks 出现之前，类组件的能力边界明显强于函数组件。

2.2K1 0

ChatGLM-6B 安装试用

输出的结果是正确的用户：你能帮我写一个react版本的web表单页面吗？用来收集用户的调查问卷。 ChatGLM-6B：当然可以！...以下是一个使用 React 编写的简单表单页面，可以收集用户的调查问卷。首先，我们需要创建一个名为问卷表单的组件，它包含一个输入框和一个提交按钮。...在组件的 props 中，我们可以传递一个调查问卷的问题列表和选项列表，用于在表单中填写问卷信息和选择选项。...接下来，我们可以在组件的 state 中保存表单中填写的信息，并在组件的生命周期方法中处理表单的提交和显示。...鸡肉是一种营养丰富、味道不错的食材，可以用来制作各种菜肴。以下是一些可以用鸡肉代替猪肉的做法： 1. 鸡肉炒饭：将鸡肉切成小块，和米饭一起炒，口感香脆，营养丰富。 2.

9325 0

一大波vue面试题及答案精心整理

keep-alive 中的生命周期哪些keep-alive是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。...，react更快 3.使用场景：React配合Redux架构适合大规模多人协作复杂项目，Vue适合小快的项目 4.开发风格：react推荐做法jsx + inline style把html和css都写在...provide / inject API主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。...computed:computed是计算属性,也就是计算值,它更多用于计算值的场景computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取...、在多个组件中使用）// 一个dep 对应多个watcher // 一个watcher 对应多个dep （一个视图对应多个属性）// dep 和 watcher是多对多的关系Vue.mixin的使用场景和原理在日常的开发中

5703 0

「前端架构」React,Angular还是Vue，太难选了？看完秒懂。

对组件进行更改也是一件轻而易举的事，而且这很少会导致整个代码库的更改链。在React中，组件不会直接呈现给Dom。...render方法返回需要呈现的内容的描述，React有一种快速而聪明的方法将其应用于DOM。这个框架是关于组件层次结构的单向数据流。子组件不知道它们的父组件，只接收来自它们的props 。...与Angular一样，它支持双向数据绑定，但组件之间的单向父子数据流是默认设置。它还有一个独特的模板语言，并且不像React那样使用虚拟DOM。 Vue中的组件与Web组件规范中的自定义元素非常相似。...它们维护有用的React DevTools，并尝试使框架抛出的警告真正有用。在React 16.8中引入React钩子使得几乎整个应用程序都可以使用短功能组件。...除了HTML，React还支持Web组件和呈现SVG。它与渲染器无关，可以在浏览器内部工作，也可以在Node.js处理和输出HTML流，甚至在移动设备上使用React Native。

6.2K4 0

前端三大框架vue，angular，react大杂烩

当然，反过来说，也有可能是起var关键字的这个人，当时考虑得面面俱到。虽然看上去是巧合，但我总感觉这之中总有一种道不明的关系。...唯一需要做的优化是在 v-for 上使用 track-by。 ...React React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。...在 Angular1 中两者有不少相混的地方 React 一个 React 应用就是构建在 React 组件之上的。组件有两个核心概念：props,state。...React 认为组件才是王道，而组件是和模板紧密关联的，组件模板和组件逻辑分离让问题复杂化了。

2.9K9 0

React 条件渲染最佳实践(7 种方法)

在 JSX 中，我们应该使用其他条件渲染方法，例如三元运算符和&&运算符。在这里，我们将讨论更多细节。以下是我积累的 7 种条件渲染方法，它们可以在 React 中使用。...让我们用一个以前的一个示例来距离。你要基于状态呈现 alert 组件。这是使用枚举对象有条件地呈现它的方式。...将枚举对象拆分到单独文件来复用关于使用枚举对象进行条件渲染的最好的特性是可以复用。回到示例案例，Alert 组件是 React 中通常可重用的组件。因此，当你要有条件地渲染它时，也可以让它复用。...6.HOC 条件渲染最佳做法摘要如果要在渲染组件之前实现或检查某些条件，请使用它。 ~~ 高阶组件（HOC）可用于在 React 中实现条件渲染。...你可以使用 HOC 来保护那些组件，而不是在每个需要身份验证的组件中编写if-else语句。

5.8K2 0

react-redux 开发实践与学习分享

在各大框架中均可使用，当然各个框架也有自己再度封装的状态管理库，如angular的ngrx，vue的vuex，而本文主要介绍的是react的react-redux。示例介绍 ?...开讲react-rudex 最初看文档的时候，有一种体验，就是各个模块（action,reducer,store）等等，都看明白了，但是具体想去完成功能的时候还是一脸懵逼，不知道如何下手，于是这次为了去更好的讲解示例...为了方便快速理解，我们可以简单粗暴的认为他是js中getter，setter中的getter，这是一个用来从redux中获取值的函数，这个函数返回的值，可以在当前组件的props中拿到。...=> state, mapDispatchToProps)(Main); 可以看到当注册页面执行showTip的函数时，就会触发redux中的showTip的操作，这个操作是提前定义好的。...这里有两个showTip，第一个是指当前页面的函数名，第二个是指redux中定义好的行为，这两个showTip没有必要的联系，只是作为一个关系映射，名字可以不一样。

8883 0

React.js 的设计思想

React:额，我认为好的东西是不需要过渡的去推销的，毕竟程序员不是傻子，而且我们在解决业务方面实现的方式不一样，感谢大伙儿厚爱。小编：能具体和大伙说一下，您的出现，给大伙儿带来了什么吗？...小编: 具体说说 React 的设计特点。 React: 首先是变换（Transformation），设计 React 的核心前提是认为 UI 只是把数据通过映射关系变换成另一种形式的数据。...React: 其次是抽象，你不可能仅用一个函数就能实现复杂的 UI。重要的是，你需要把 UI 抽象成多个隐藏内部细节，又可复用的函数。通过在一个函数中调用另一个函数来实现复杂的 UI，这就是抽象。...React: UI 不单单是对服务器端或业务逻辑状态的复制。实际上还有很多状态是针对具体的渲染目标;所以我们倾向于使用不可变的数据模型。我们把可以改变 state 的函数串联起来作为原点放置在顶层。...小编：咱们聊了这么多，能给我们个例子吗？具体的是，能跑个 Hello World 吗？虽然这期不是入门教程专栏。 React：当然可以。 <!

1.7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭