开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在react组件中保持强ui相关状态是不是一种糟糕的做法？

在React组件中保持强UI相关状态通常被认为是一种糟糕的做法。这是因为React的设计理念是将UI状态与组件的状态分离，通过使用组件的props和state来管理UI状态。

强UI相关状态指的是与UI外观、交互直接相关的状态，例如组件的可见性、样式、动画等。将这些状态直接存储在组件的state中会导致以下问题：

组件变得难以维护：当UI状态与组件的业务逻辑混合在一起时，组件的代码会变得混乱且难以理解。这会增加代码的复杂性，使得后续的维护和修改变得困难。
重复代码的出现：如果多个组件需要共享相同的UI状态，将这些状态存储在每个组件的state中会导致重复的代码。这不仅增加了代码量，还增加了bug的出现概率。
难以复用和测试：将强UI相关状态存储在组件的state中会使得组件难以复用和测试。因为这些状态与组件的实现细节紧密耦合，无法在不同的上下文中进行重用。

为了解决这些问题，推荐的做法是将强UI相关状态提升到组件的父组件中，通过props传递给子组件。这样可以实现UI状态的集中管理，提高代码的可维护性和可复用性。

对于React组件中的强UI相关状态，可以考虑使用以下解决方案：

使用状态管理库：例如Redux或MobX等状态管理库可以帮助管理全局的UI状态，使得状态的变化可以被多个组件共享和订阅。
使用上下文（Context）：React的上下文机制可以将状态传递给组件树中的所有子组件，避免了props层层传递的繁琐。但需要注意上下文的使用时机和范围，避免滥用。
使用CSS类名切换：对于一些简单的UI状态变化，可以通过切换CSS类名来实现，而不是通过组件的state来管理。这样可以将UI状态与组件的状态分离，提高代码的可读性和可维护性。

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

腾讯云云开发（Serverless）：https://cloud.tencent.com/product/scf
腾讯云云函数（Function Compute）：https://cloud.tencent.com/product/scf
腾讯云云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（Mobile）：https://cloud.tencent.com/product/mobile
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链（Blockchain）：https://cloud.tencent.com/product/baas
腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

请注意，以上链接仅供参考，具体产品选择应根据实际需求和情况进行评估。

相关搜索:React:直接导入子组件而不是作为依赖项传入是不是一种糟糕的做法？在Slim Framerwork中的容器上设置$app实例是不是一种糟糕的做法？(在VS for Windows forms上编写)：在公共分部类中声明变量是不是一种糟糕的做法？在组件重绘后保持从函数react组件中的属性映射的变量状态对于从另一个函数中的一个函数更新React组件的状态，这种做法是不是很好？如何使react类组件在登录后保持其状态，并根据组件中当前可用的状态更改可用路由？在一个框架中动态更新模式是不是一种糟糕的做法？如果不是，这可以在检查员中反映出来吗？在React中，有没有一种很好的方式来使用RESTful编辑url中的id，并将相应的对象加载到组件的初始状态？js中的log js 页面横屏

相关搜索:

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

有帮助

没帮助

相关·内容

「思考」 React Hooks 的设计哲学

createClass 是当时第一种用于创建 React 组件的语法, 因为当时Javascript 还没有成形的 Class 体系。这种情况在2015年1月17号得到了改变。...基于这个变化， React Class 组件就变成了我们之前经常见到的这样： ? 是不是很熟悉。生命周期方法和之前保持一致，变化的是组件初始化的部分。...我们在编写react 应用的时候，难以避免的一件事就是：拆分react 组件。把一个复杂的UI视图拆分成不同的模块，然后组合在一起。这也是 react 本身推崇的理念：万物皆可是组件。...逻辑复用困难我们都知道， react 应用其实是由一些列 UI 套件组合而成的，这些套件有些有状态，有些没有状态。 ? 把这些组件组合在一起，处理好复用，其实是有一定困难的。...我们在自己平时的搬砖运动中，也要考虑自己的代码是否具备一下能力：简单好用足够灵活方便组合扩展性强不坑自己，也不坑别人，早点下班。

6752 0

在追寻极致体验的康庄大道上，React 玩出了花

Suspense 组件可以放在（组件树中）Lazy 组件上方的任意位置，并且下方可以有多个 Lazy 组件。...假如 loading 非常快（只需要 100ms），用户可能只感觉到了什么东西忽闪而过……又一个糟糕的用户体验当然，这样的场景我们通常不加 loading，因为 loading 通常带给用户一种“慢”...，Transition 引入了一种旧内容仍然可用的 Pending 状态： ?...spinner : null} ); } 这也是官方推荐的做法，由 UI 组件库来考虑需要 useTransition 的场景，以减少冗余代码： Pretty much any button...State：需要 delay 的状态，比如 Transition 相关的也就是说，有了 Transition 之后，State 有了优先级五.考虑牺牲 UI 一致性对于砍不掉的长 loading

1.6K2 0

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

下面介绍文中给出的三种取数方式，首先是最原始的本地状态管理方案。本地异步状态管理，直白但不利于维护在 Suspense 方案出来之前，我们一般都在代码中利用本地状态管理异步数据。... ); } } 如上所述，首先申明本地状态管理至少三种数据：异步状态、异步结果与异步错误，其次在不同的生命周期中处理初始化发请求与重新发请求的问题，最后在渲染函数中根据不同的状态渲染不同的结果...数据与状态封闭性 - 糟糕的用户体验 + 开发体验所有数据与状态管理都存储在每一个这种组件中，将取数状态与组件绑定的结果就是，我们只能忍受组件独立运行的 Loading 逻辑，而无法对他们进行统一管理...最后还是从如下几个角度进行评价：冗余的三种状态 - 糟糕的开发体验 - ⭐️ 可以看到，组件只要处理成功得到数据的状态即可，三种状态合并成了一种状态。...UI 组件分离，所有 UI 组件都无需关心 Pending 状态，而是当作同步去执行，这本身就是一个巨大的改变。

4202 0

你不知道的 React 最佳实践

虽然不能说一种文件组织方式比另外一种更好，但保持文件的组织性非常重要。在 React 中，随着应用不断变大，代码文件个数也会极具膨胀，且因为每个组件至少有一个与之关联的文件。...在每个文件夹中添加 package.json 并不是一个好的做法，但是它有助于轻松处理文件。...不仅在 React 中，在所有的应用程序开发中，通用的规则都是尽可能保持代码的简洁和小巧。 React 最佳实践指示保持无错误的代码和精辟的代码。...但是，在初始状态下使用 props 并不是最佳实践。将状态初始化为类字段是最佳实践。使用构造函数初始化组件状态并不是很糟糕的做法，但是它增加了代码中的冗余并造成了一些性能问题。...有状态组件存储组件的状态信息并提供必要的上下文。对于无状态组件，因为不能保持状态，所以不能给用户界面的部分提供上下文。无状态组件是可伸缩的、可重用的，就像纯 JavaScript 函数一样。

3.2K1 0

前端-现代 js 框架存在的根本原因

但只要你犯下了很小的错误，UI 与状态将不再保持同步：（可能会出现）丢失或呈现错误的信息、不再响应用户的操作，更糟糕的是触发了错误的动作（如点了删除按钮后删除了非对应的一项）。...框架是如何工作的呢? 基于两个基本的策略：重新渲染整个组件，如 React。当组件中的状态发生改变时，在内存中计算出（新的）DOM 结构后与已有的 DOM 结构进行对比。实际上，这是非常昂贵的。...如果你在应用中使用 Web components 时，想保持 UI 与内部状态同步，则需要（开发者）手工完成，或者使用如 Stencil.js (内部和 React 一样，使用虚拟 DOM) 之类的库。...让我们明确一点：框架表现出的巨大潜力并不体现在组件化上，保持 UI 与状态同步才是具体的体现。Web components 并未提供相关的功能，你必须手工或使用第三方库去解决（同步的）问题。...我们能任意添加新逻辑来改变状态的同时，不需要编写额外的代码来保持 UI 同步。问题解决了！现在，除了事件处理之外，这看起来就像个 React 应用对吧？

2.8K1 0

百度前端必会react面试题汇总

DOM，响应 prop 或 state 的改变componentWillUnmount -- 在这你可以取消网络请求，或者移除所有与组件相关的事件监听器React Hooks在平时开发中需要注意的问题和原因...（1）不要在循环，条件或嵌套函数中调用Hook，必须始终在 React函数的顶层使用Hook这是因为React需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数。...（2）HashRouter使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。...在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系...对 React 和 Vue 的理解，它们的异同相似之处：都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模板。

1.6K1 0

React 深入系列３：Props 和 State

组件的props 和 state都和组件最终渲染出的UI直接相关。...state必须能代表一个组件UI呈现的完整状态集，即组件对应UI的任何改变，都可以从state的变化中反映出来；同时，state还必须是代表一个组件UI呈现的最小状态集，即state中的所有状态都是用于反映组件...组件中用到的一个变量是不是应该作为组件state，可以通过下面的4条依据进行判断：这个变量是否是通过props从父组件中获取？如果是，那么它不是一个状态。...这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。这个变量是否可以通过state 或props 中的已有数据计算得到？如果是，那么它不是一个状态。...请务必牢记，并不是组件中用到的所有变量都是组件的状态！当存在多个组件共同依赖同一个状态时，一般的做法是状态上移，将这个状态放到这几个组件的公共父组件中。

2.8K6 0

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

众所周知，hook 在 React 组件开发中变得越来越重要，特别是在功能组件中，因为它们已经完全取代了对基于类的组件的需求，而基于类的组件是管理有状态组件的传统方式。...然而，没有人直接告诉你的是，根据组件在该状态下的期望，使用错误的类型值初始化 useState 可能会导致应用程序中意外的行为，例如无法呈现 UI，导致黑屏错误。...然而，这是一种不好的做法，可能会导致预期的行为，如上所示。初始化 useState 的首选方法是将预期的数据类型传递给它，以避免潜在的空白页错误。...但是，直接更新状态是一种不好的做法，在处理多个用户使用的实时应用程序时可能会导致潜在的错误。为什么？因为与你所想的相反，React 不会在单击按钮时立即更新状态。...在这个事件函数中，我们有一个 setUser() 状态函数，它接受用户的以前/当前状态，并使用拓展操作符解包这个用户状态。然后检查事件对象中触发函数的目标元素名（与状态中的属性名相关）。

5K2 0

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

在 React 中, 组件就是模块. 单一职责要求将组件限制在一个’合适’的粒度. 这个粒度是比较主观的概念, 换句话说’单一’是一个相对的概念....高内聚, 要求一个组件有一个明确的组件边界, 将紧密相关的内容聚集在一个组件下, 实现”专一”的功能....Redux 建议保持组件的纯净性, 将组件状态交给 Redux 和配套的异步处理工具来维护, 这样就将整个应用抽象成了一个”单向的数据流”, 这是一种简单的”输入/输出”关系 image.png 不管是...在实际的 React 开发中, 非受控组件的场景非常少, 我认为自定义组件都可以忽略这种需求, 只提供完全受控表单组件, 避免组件自己维护缓存状态 ---- 4....组件划分示例我们一般会从 UI 原型图中分析和划分组件, 在 React 官方的Thinking in react也提到通过 UI 来划分组件层级: “这是因为 UI 和数据模型往往遵循着相同的信息架构

1.9K3 1

他开发了redux，昨晚字节一面却挂了？

，我觉得next.js是可以把react相关的观念去简化，所以他有可能会取代目前的功能，如果大家对Server Component 感兴趣的话，你的思考模式是围绕组件进行的，这是可控的，那你也可以做出自主的决定...，吧什么样的组件在服务器去运转，不会占用你太长的时间，代码也是一样的，他们会更加的清晰，你就不需要去思考你是在做渲染还是做别的事情，这是一种很不错的优化 Q12: 对于找工作的同学来说，什么样的科技公司更吸引人...Q13: 说说你的个人经历，你刚加入facebook，如何学习react的相关知识的 react代码其实比较复杂，在最开始需要研究代码，去熟悉，主要还是去了解整个的架构，把它了解透彻了没问题了，就Ok了...Q15: 作为react用户，我们去看源码，是不是一个好的做法我并不认为很有必要，因为很难去理解我们的源码，如果你直接去读，你可能会很困惑，因为你不了解底层的框架，有人跟你解释一下可能更好一些。...，所以可以从性能这个方面看到这些基本的功能的目的是什么 Q16: 你是如何保持对react的热情的我本身就很喜欢，react理念跟我对ui代码的想法很一致，我在facebook之前，在初创公司，当时直接用了

2742 0

他开发了redux，昨晚“字节一面“却挂了？

，我觉得next.js是可以把react相关的观念去简化，所以他有可能会取代目前的功能，如果大家对Server Component 感兴趣的话，你的思考模式是围绕组件进行的，这是可控的，那你也可以做出自主的决定...，吧什么样的组件在服务器去运转，不会占用你太长的时间，代码也是一样的，他们会更加的清晰，你就不需要去思考你是在做渲染还是做别的事情，这是一种很不错的优化 Q12: 对于找工作的同学来说，什么样的科技公司更吸引人...Q13: 说说你的个人经历，你刚加入facebook，如何学习react的相关知识的 react代码其实比较复杂，在最开始需要研究代码，去熟悉，主要还是去了解整个的架构，把它了解透彻了没问题了，就Ok了...Q15: 作为react用户，我们去看源码，是不是一个好的做法我并不认为很有必要，因为很难去理解我们的源码，如果你直接去读，你可能会很困惑，因为你不了解底层的框架，有人跟你解释一下可能更好一些。...，所以可以从性能这个方面看到这些基本的功能的目的是什么 Q16: 你是如何保持对react的热情的我本身就很喜欢，react理念跟我对ui代码的想法很一致，我在facebook之前，在初创公司，当时直接用了

7661 1

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

将函数作为属性传递是修改父组件状态的常见做法。它使得所有的东西都是松散耦合的、模块化的、快速的。...Angular应用程序总是有一个支持引导的根模块，通常有一堆特性模块。NgModules是将相关代码收集到功能组件中的基本构建块。组件为屏幕元素定义视图，并使用与视图不直接相关的特定功能的服务。...强类型语言有许多优点，比如出现错误的机会更少、工具更好、重构功能更强大以及总体上可维护性更好。我们也推荐它用于React项目。与其他鼓励自由的框架不同，Angular通常有一种建议的做事方式。...除了呈现HTML视图外，它还具有双向数据绑定，以使UI中的更改与数据同步，反之亦然。它比React的单向绑定直观得多，使它更容易在静态网站中添加动态功能。...结论对于一个新项目来说，这三个框架中的任何一个都不会完全出错。明智的做法是将你的决定主要建立在你的团队现有的专业知识之上。当涉及到小部件和其他可嵌入的UI组件时，Preact是最好的。

6.3K4 0

React面试八股文（第一期）

对 Redux 的理解，主要解决什么问题React是视图层框架。Redux是一个用来管理数据状态和UI状态的JavaScript应用工具。...（Redux支持React、Angular、jQuery甚至纯JavaScript）。在 React 中，UI 以组件的形式来搭建，组件之间可以嵌套组合。...主要解决的问题：单纯的Redux只是一个状态机，是没有UI呈现的，react- redux作用是将Redux的状态机和React的UI呈现绑定在一起，当你dispatch action改变state的时候...react组件的划分业务组件技术组件？根据组件的职责通常把组件分为UI组件和容器组件。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。...这种组件在React中被称为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相对应，react通过这种方式消除了组件的局部状态，使整个状态可控。

3.1K3 0

React16中的错误处理

(https://github.com/facebook/react/issues/10294) React15和更早版本中的行为在过去，组件内部的JavaScript错误会破坏React的内部状态，...这些错误经常是由代码中早期的错误引起的，但是React并没有提供一种在组件中优雅地处理它们的方法，并且无法从它们中恢复过来。引入错误边界 UI部分的一个JavaScript错误不应该破坏整个程序。...我们讨论了这个决定，但根据我们的经验，把损坏的UI留下比彻底删除更糟糕。例如，在像Messenger这样的产品中，留下破损的UI可能导致某人向错误的人发送消息。...如果某个UI区域中的某个组件崩溃，剩下的部分仍然保持交互。我们也鼓励您使用JS错误上报服务（或建立您自己的），您可以了解他们在生产中发生的未处理的异常，并修复。...现在你可以精确地看到在组件树的哪部分发生了错误： ? 你也可以看到文件名和行号在组件堆栈跟踪中。这在Create React App脚手架中是默认的： ?

2.5K2 0

ReactJS和React-Native的主要区别在哪里

这些React-Native组件映射了在应用程序上呈现的实际的真正的原生iOS或Android UI组件。...使用React-Native，您将学到一种全新的方式，通过Javascript为应用程序的不同组件设置动画。动画化组件的推荐方法是使用React-Native提供的Animated API。...然后，我开始想知道导航切换是如何工作的，我发现了React-Native提供的Navigator组件。我应该从这开始，寻找一个替代的react-router在我看来不是最好的做法。 ?...我确信你为现代浏览器写代码时遇到过类似的问题，而且需要在旧浏览器中看起来“不太糟糕”，在这里添加一些条件代码，在那里Javascript中甚至在Javascript 。...我建议您将组件的主要逻辑定义在一个名为index.js的文件中，然后您将使用单个文件定义演示组件。

17K3 0

从 Styleguidist 迁移到 Storybook

Styleguidist 还可以用于生成静态文档页面（样式指南），并分享给其他利益相关者。文档是用 Markdown 创建的，带有代码块，这些代码块在一个单独的交互式沙盒中渲染 React 组件。...开发人员必须为每个组件创建许多排列，以显示组件可能支持的每一种状态。通过编辑 Markdown 来修改组件状态对于开发人员和非技术用户来说并不直观。...这与性能糟糕的 Styleguidist 形成了对比，Styleguidist 总是会渲染包中的每一个组件的每一个示例。...在 Storybook 中，开发人员可以通过 react-docgen 自动生成控件，用户可以在文档 UI 中直接修改和预览组件。...为了保持现有 React 组件示例并减少开发人员在迁移过程中的负担，我们列出了以下这些需求：我们现有的 Styleguidist 文件使用了 ES5 风格的导入和语法。

1.4K2 0

谈一谈我对React Hooks的理解

0x00 React中的useEffect 在React中有非常多的Hooks，其中useEffect使用非常频繁，针对一些具有副作用的函数进行包裹处理，使用Hook的收益有：增强可复用性、使函数组件有状态...不过在后来不断地学习以及运用之后，我个人觉得hooks其实是一种非常轻量的方式，在项目构建中，开发自定义的hooks，然后在应用程序中任意地方调用hook，类似于插件化（可插拔）开发，降低了代码的耦合度...我对于hooks的心智模型，简单来讲，就是一种插件式、有状态、有序的工具函数。...整个执行过程可以简单总结如下：组件被点击，触发更新count为1，通知React，“count值更新为1了” React响应，向组件索要count为1的UI 组件：给count为1时候的虚拟DOM...而在类组件中，通过 this.setState() 的做法每次拿到的也是最新的值 ---- 0x04 effect的清理在前面的描述中或多或少涉及到对于effect的清理，只是为了便于一个理解，但描述并不完全准确

1.2K2 0

useTransition真的无所不能吗？🤔

App将保持切换Button的状态并渲染正确的组件。...理论上来说，渲染100个组件对React来说小菜一碟，但架不住每个组件需要10毫秒。那就得到一个糟糕的结果，渲染B页面将需要1秒钟。...❝“后台”是一种数据的抽象：有几点需要说明由于JavaScript是单线程的。在繁忙的“后台”任务执行过程中，React将定期检查主队列。如果队列中出现新的任务，它将优先于“后台”工作。...这里的问题在于， ❝如果我们将状态更新包装在一个过渡中，React并不只是在"后台"触发状态更新。实际上，这是一个「两步过程」。...因此，如果我们将setData包装在startTransition中，由此引起的初始重新渲染不会太糟糕：它将使用空状态和加载指示器重新渲染。

4001 0

聊一聊状态管理和concent设计理念

，我们可以直接修改状态，mbox会自动驱动ui渲染更新，因其响应式的理念和vue很相近，在react里搭配mobx-react使用后，很多人戏称mobx是一个将react变成了类vue开发体验的状态管理方案...我心中的理想方案上述相关的各种方案，都各自在一定程度上能满足我们的需求，但是对于追求完美的水瓶座程序猿，我觉得它们终究都不是我理想的方案，它们或小而美、或大而全，但还是不够强，不够友好，所以决定开始自研状态管理方案...Foo组件里声明state，其他地方看起来是不是给你一种感觉：这不就是一个地地道道的react组件标准写法吗？...，是在不停的迭代过程中反复抽象逐渐沉淀下来的。...ui更新的时机，仅将他们返回的新部分状态按模块分类合并后暂存起来，最后的源头函数调用结束时才一次性的提交到store并触发相关实例渲染。

3.5K26 2

React Advanced Topics

错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。...React 需要基于这两棵树之间的差别来判断如何有效率的更新 UI 以保证当前 UI 与最新的树保持同步。这个算法问题有一些通用的解决方案，即生成将一棵树转换成另一棵树的最小操作数。...在这个概念里，UI以一种理想化，或者说“虚拟的”表现形式被保存在内存中，并通知如ReactDOM等类库使之与“真实的”DOM同步。这一过程叫做“协调”。...能够在父元素与子元素之间交错处理，以支持 React 中的布局。能够在 render() 中返回多个元素。更好地支持错误边界。为了做到这一点，我们首先需要一种将工作分解成多个单元的方法。...也就是说，在虚拟DOM的对比过程中，如果发现一个元素实例有更新，则会立即同步执行操作，提交到真是DOM的更改。折在动画、布局以及手势等领域，可能会带来非常糟糕的用户体验。

1.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭