首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

REACT-将需要频繁更新的数据存储为全局变量,而不是使用setState() -不推荐吗?

REACT是一个流行的前端开发框架,它提供了一种声明式的编程模型,用于构建用户界面。在REACT中,通常使用组件的状态(state)来存储需要频繁更新的数据。setState()是REACT提供的一个方法,用于更新组件的状态并重新渲染界面。

将需要频繁更新的数据存储为全局变量而不使用setState()是不推荐的做法。这是因为REACT的设计理念是基于组件化开发,通过将界面拆分为多个组件,每个组件负责管理自己的状态和渲染逻辑,从而实现代码的可维护性和可复用性。

使用全局变量来存储需要频繁更新的数据会导致以下问题:

  1. 可维护性下降:全局变量会增加代码的复杂性,使得代码难以理解和维护。当多个组件都依赖于同一个全局变量时,修改全局变量的逻辑会变得复杂,并且很难追踪数据的变化。
  2. 可复用性下降:将数据存储为全局变量会使得组件之间的耦合度增加,降低了组件的可复用性。当需要在其他组件中使用相同的数据时,需要引入全局变量,导致代码的耦合性增加。
  3. 性能问题:REACT使用虚拟DOM来提高界面渲染的性能。当组件的状态发生变化时,REACT会通过比较虚拟DOM来确定需要更新的部分,并进行局部更新。如果使用全局变量来存储需要频繁更新的数据,会导致整个界面的重新渲染,性能会受到影响。

因此,推荐使用setState()来更新组件的状态,而不是将需要频繁更新的数据存储为全局变量。这样可以保持代码的可维护性和可复用性,并且能够充分利用REACT的性能优化机制。

腾讯云提供了云计算相关的产品和服务,例如云服务器、云数据库、云存储等,可以帮助开发者构建和部署云原生应用。具体的产品介绍和相关链接可以参考腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

小前端读源码 - React16.7.0(合成事件)

需要注意是,绑定事件之前会通过isInteractiveTopLevelEventType函数检测当前事件类型是否React支持事件类型,如果当前事件并不是React配置中所处理事件,那么将会直接绑定...反复看了几遍执行过程并没有发现。 大大黑人疑问表情!!! 那么就可以确定应该是源码有所修改,难道是因为使用了Fiber架构后,对于合成事件绑定也做了修改?...还记得上一篇文章说过setState为什么异步?...requestWork相当重要,是决定setState是否异步一个函数,其中判断是否异步就是用过React内部一个全局变量isBatchingUpdates是否true。...Lam:小前端读源码 - React16.7.0(渲染总结篇) 当然这次是setState,所以render阶段会处理会有所不同,但是本文涉及更新以及diff算法,以后会详细去说。

2.3K20

React面试八股文(第一期)

react有什么特点react使用虚拟DOM,不是真实DOMreact可以用服务器渲染react遵循单向数据流 或者数据绑定React 数据持久化有什么实践?...但是官方提倡我们使用内置 PureComponent 不是自己编写 shouldComponentUpdate。...它是一个回调函数,当 setState方法执行结束并重新渲染该组件时调用它。在工作中,更好方式是使用 React组件生命周期之——“存在期”生命周期方法,不是依赖这个回调函数。...不是每个状态更新编写一个事件处理程序。React官方解释:要编写一个非受控组件,不是每个状态更新都编写数据处理函数,你可以使用 ref来从 DOM 节点中获取表单数据。...如果是现用现取称为非受控组件,通过setState输入值维护到了state中,需要时再从state中取出,这里数据就受到了state控制,称为受控组件。

3K30

react面试题笔记整理

得倒新虚拟DOM树后,会计算出新老树节点差异,会根据差异对界面进行最小化渲染按需更新 在差异话计算中,react可以相对准确知道哪些位置发生了改变以及该如何改变,这保证按需更新不是宣布重新渲染概述一下...受控组件是 React 控制中组件,并且是表单数据真实唯一来源。非受控组件是由 DOM 处理表单数据地方,不是在 React 组件中。...尽管非受控组件通常更易于实现,因为只需使用refs即可从 DOM 中获取值,但通常建议优先选择受控制组件,不是非受控制组件。...其他方式在列表需要频繁变动时,使用唯一 id 作为 key,不是数组下标。必要时通过改变 CSS 样式隐藏显示组件,不是通过条件判断显示隐藏组件。...中解绑事件;在componentDidMount中进行数据请求,不是在componentWillMount;需要根据 props 更新 state 时,使用getDerivedStateFromProps

2.7K30

高级前端常考react面试题指南_2023-05-19

其他方式在列表需要频繁变动时,使用唯一 id 作为 key,不是数组下标。必要时通过改变 CSS 样式隐藏显示组件,不是通过条件判断显示隐藏组件。...根据表单数据存储位置,组件分成约東性组件和非约東性组件。...如下所示, username没有存储在DOM元素内,而是存储在组件状态中。每次要更新 username时,就要调用 setState更新状态;每次要获取 username值,就要获取组件状态值。...但是之前数据结构不支持这样实现异步 diff,于是 React 实现了一个类似链表数据结构,原来 递归diff 变成了现在 遍历diff,这样就能做到异步可更新React- Router有几种形式...JavaScript中map不会对null或者undefined数据进行处理,React.Children.map中map可以处理React.Childrennull或者undefined情况

1.6K31

滴滴前端高频react面试题总结

通过引用不是使用来命名组件displayName。...根据表单数据存储位置,组件分成约東性组件和非约東性组件。...为什么调用 setState 不是直接改变 state?解答如果您尝试直接改变组件状态,React 无法得知它需要重新渲染组件。通过使用setState()方法,React 可以更新组件UI。...({ counter: state.counter + props.increment}));你对【单一数据源】有什么理解redux使用 store程序整个状态存储在同一个地方,因此所有组件状态都存储在...所以,如果想要修改state值,就需要使用setState不能直接修改state,直接修改state之后页面是不会更新。什么是纯函数?纯函数是不依赖并且不会在其作用域之外修改变量状态函数。

3.9K20

React常见面试题

【实验性】context目前还处于实验阶段,可能会在后期有大改变,避免给未来升级带来麻烦 【稳定性】context更新需要通过 setState触发,但是这并不是可靠。...,在patch(batching批处理)过程中尽可能地一次性差异更新到DOM中,降低更新DOM频率 **【数据驱动程序】**使用数据驱动页面,不是操作DOM形式 【跨平台】:node层没有DOM...【数据合并】多个setState会进行数据合拼,准备批量更新数据合并到组件的当前状态】生成新 react tree 【更新UI】比较使用diff算法,比较新旧 virtual dom,,最小化DOM...,其实本身执行过程和代码都是同步,只是合成事件和钩子函数调用顺序在更新之前;在异步更新中,多次setState后面的值会覆盖前面的; # 为什么setState设计成同步?...语法区别: 【事件名小驼峰】react事件命令采用小驼峰式,不是纯小写 【事件方法函数】使用JSX语法时,你需要传入一个函数作为事件处理函数,不是一个字符串 react事件优点 【兼容性更强】合成事件

4.1K20

React高频面试题梳理,看看面试怎么答?(上)

最佳实践 React会对多次连续 setState进行合并,如果你想立即使用上次 setState结果进行下一次 setState,可以让 setState 接收一个函数不是一个对象。...原生事件和React事件区别? React 事件使用驼峰命名,不是全部小写。 通过 JSX , 你传递一个函数作为事件处理程序,不是一个字符串。...,被包裹组件也不关心数据来自何处。...在遵守约定情况下使用 HOC也有可能带来一定冲突,比如 props覆盖等等,使用 Hook则可以避免这些问题。...使用 Hook,可以让你更大限度公用逻辑抽离,一个组件分割成更小函数,不是强制基于生命周期方法进行分割。

1.7K21

美团前端经典react面试题整理_2023-02-28

当一个组件相关数据更新时,即使父组件不需要用到这个组件,父组件还是会重新render,可能会有效率影响,或者需要写复杂shouldComponentUpdate进行判断。...如果 setState 写在条件判断中,假设条件判断不成立,没有执行里面的 setState 方法,会导致接下来所有的 setState 取值出现偏移,从而导致异常发生。...但是这种写法很少使用,并不是常用写法。React允许对 setState方法传递一个函数,它接收到先前状态和属性数据并返回一个需要修改状态对象,正如我们在上面所做那样。...它不但没有问题,而且如果根据以前状态( state)以及属性来修改当前状态,推荐使用这种写法。 React- Router有几种形式? 有以下几种形式。...BrowerRouter,利用HTML5中 history API实现,需要服务器端支持,兼容性不是很好。 如何使用4.0版本 React Router?

1.5K20

滴滴前端二面必会react面试题指南_2023-02-28

可以数据请求放在这里进行执行,需要参数则从componentWillReceiveProps(nextProps)中获取。不必将所有的请求都放在父组件中。...组件或页面通过服务器生成html字符串,再发送到浏览器,最后静态标记"混合"客户端上完全交互应用程序。...时间耗时比较: 1)数据请求 由服务端请求首屏数据不是客户端请求首屏数据,这是"快"一个主要原因。服务端在内网进行请求,数据响应速度快。...展示专门通过 props 接受数据和回调,并且几乎不会有自身状态,但当展示组件拥有自身状态时,通常也只关心 UI 状态不是数据状态。 容器组件则更关心组件是如何运作。...通过引用不是使用来命名组件displayName。

2.2K40

阿里前端二面常考react面试题(必备)_2023-02-28

ajax获取到数据然后使用jquery生成dom结果然后更新到页面当中,但是随着业务发展,我们项目可能会越来越复杂,我们每次请求到数据,或则数据有更改时候,我们又需要重新组装一次dom结构,然后更新页面...这个时候mvvm出现了,mvvm双向数据绑定可以让我们在数据修改同时同步dom更新,dom更新也可以直接同步我们数据更改,这个特定可以大大降低我们手动去维护dom更新成本,mvvmreact...react设计之初是主要负责UI层渲染,虽然每个组件有自己state,state表示组件状态,当状态需要变化时候,需要使用setState更新我们组件,但是,我们想通过一个组件重渲染它兄弟组件...shouldUpdateComponent,建议开发者进行更改,这使得我们使用mobx开发项目的时候可以简单快速完成很多功能,连redux作者也推荐使用mobx进行项目开发。...但是,随着项目的不断变大,mobx也不断暴露出了它缺点,就是数据流太随意,出了bug之后不好追溯数据流向,这个缺点正好体现出了redux优点所在,所以针对于小项目来说,社区推荐使用mobx,对大项目推荐使用

2.8K30

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

当不需要使用生命周期钩子时,应该首先使用无状态函数组件组件内部维护 state ,只根据外部组件传入 props 进行渲染组件,当 props 改变时,组件重新渲染。...不是每个状态更新编写一个事件处理程序。React官方解释:要编写一个非受控组件,不是每个状态更新都编写数据处理函数,你可以使用 ref来从 DOM 节点中获取表单数据。...如果是现用现取称为非受控组件,通过setState输入值维护到了state中,需要时再从state中取出,这里数据就受到了state控制,称为受控组件。...之间简单关系以及不需要处理第一次渲染时prevProps情况基于第一点,状态变化(setState)和昂贵操作(tabChange)区分开,更加便于 render 和 commit 阶段操作或者说优化...为了合并setState,我们需要一个队列来保存每次setState数据,然后在一段时间后执行合并操作和更新state,并清空这个队列,然后渲染组件。

2.2K10

2023前端二面必会react面试题合集_2023-02-28

context更新需要通过setState()触发,但是这并不是很可靠,Context支持跨组件访问,但是如果中间子组件通过一些方法不影响更新,比如 shouldComponentUpdate(...) 返回false 那么不能保证Context更新一定可以使用Context子组件,因此,Context可靠性需要关注 setState 是同步异步?...为了合并setState,我们需要一个队列来保存每次setState数据,然后在一段时间后执行合并操作和更新state,并清空这个队列,然后渲染组件。 非嵌套关系组件通信方式?...总结:useState 返回是 array 不是 object 原因就是为了降低使用复杂度,返回数组的话可以直接根据顺序解构,返回对象的话要想使用多次就需要定义别名了。...中请求 redux有什么缺点 一个组件所需要数据,必须由父组件传过来,不能像flux中直接从store取。

1.5K30

react高频面试题总结(附答案)

但是在已经使用redux来管理和存储全局数据基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能框架呢?...在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新不是全部重新渲染。如果在短时间内频繁setState。...如果是异步,则可以把一个同步代码中多个setState合并成一次组件更新。所以默认是异步,但是在一些情况下是同步setState不是单纯同步/异步,它表现会因调用场景不同不同。...可以数据请求放在这里进行执行,需要参数则从componentWillReceiveProps(nextProps)中获取。不必将所有的请求都放在父组件中。...时间耗时比较:1)数据请求由服务端请求首屏数据不是客户端请求首屏数据,这是"快"一个主要原因。服务端在内网进行请求,数据响应速度快。

2.2K40

Flutter 绘制探索 1 | CustomPainter 正确刷新姿势 | 七日打卡

使用 CustomPainter 容易出现疑问 本文是第一篇,就先从 CustomPaint 开始说起。你在 Flutter 绘制中,还在使用 State#setState 来刷新画板?...使用画板 自定义画板想要展示出来,需要使用 CustomPaint 组件,其设置 painter 属性。如下代码,在实例化 ShapePainter 时传入红色。...较高层状态类使用 setState (推荐) 通过 ValueListenableBuilder 篇,我们应该知道在较上级 State 类中执行 setState 会导致更多 Build 过程。...(推荐) 那也许你会说,只要降低刷新节点, 画板组件 单独抽离出去,或使用 ValueListenableBuilder 局部刷新不就好了吗?...ValueListenableBuilder 源码中也是基于 State#setState 进行重构,并不是一个东西非好即坏,还需要使用场景和时机。

77821

React高频面试题(附答案)

答:componentWillMount componentDidMount render你对【单一数据源】有什么理解redux使用 store程序整个状态存储在同一个地方,因此所有组件状态都存储在...当一个组件不需要管理自身状态时,也就是无状态组件,应该优先设计函数组件。比如自定义 、 等组件。React组件构造函数有什么作用?它是必须?...所以,如果想要修改state值,就需要使用setState不能直接修改state,直接修改state之后页面是不会更新。当调用setState时,React render 是如何工作?...,这保证按需更新不是宣布重新渲染React生命周期有哪些?...之间简单关系以及不需要处理第一次渲染时prevProps情况基于第一点,状态变化(setState)和昂贵操作(tabChange)区分开,更加便于 render 和 commit 阶段操作或者说优化

1.4K21

前端开发常见面试题,有参考答案

JavaScript中map不会对null或者undefined数据进行处理,React.Children.map中map可以处理React.Childrennull或者undefined情况...之间简单关系以及不需要处理第一次渲染时prevProps情况基于第一点,状态变化(setState)和昂贵操作(tabChange)区分开,更加便于 render 和 commit 阶段操作或者说优化.... */} ); }}复制代码react有什么特点react使用虚拟DOM,不是真实DOMreact可以用服务器渲染react遵循单向数据流 或者数据绑定React中setState...可以数据请求放在这里进行执行,需要参数则从componentWillReceiveProps(nextProps)中获取。不必将所有的请求都放在父组件中。...context更新需要通过setState()触发,但是这并不是很可靠,Context支持跨组件访问,但是如果中间子组件通过一些方法不影响更新,比如 shouldComponentUpdate(

1.3K20

react相关面试知识点总结

通常,使用 Webpack DefinePlugin方法 NODE ENV设置 production。这将剥离 propType验证和额外警告。...dom结构,然后更新页面,这样我们手动同步dom和数据成本就越来越高,而且频繁操作dom,也使我我们页面的性能慢慢降低。...shouldUpdateComponent,建议开发者进行更改,这使得我们使用mobx开发项目的时候可以简单快速完成很多功能,连redux作者也推荐使用mobx进行项目开发。...但是,随着项目的不断变大,mobx也不断暴露出了它缺点,就是数据流太随意,出了bug之后不好追溯数据流向,这个缺点正好体现出了redux优点所在,所以针对于小项目来说,社区推荐使用mobx,对大项目推荐使用...,与事务流无关,自然是同步;setTimeout是放置于定时器线程中延后执行,此时事务流已结束,因此也是同步;批量更新 : 在 合成事件 和 生命周期钩子 中,setState更新队列时,存储是 合并状态

1K50

这些react面试题你会,反正我回答不好

HOC 自身不是 React API 一部分,它是一种基于 React 组合特性形成设计模式。具体而言,高阶组件是参数组件,返回值新组件函数。...在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新不是全部重新渲染。如果在短时间内频繁setState。...如果是异步,则可以把一个同步代码中多个setState合并成一次组件更新。所以默认是异步,但是在一些情况下是同步setState不是单纯同步/异步,它表现会因调用场景不同不同。...如果每次调用 setState都进行一次更新,那么意味着render函数会被频繁调用,界面重新渲染,这样效率是很低;最好办法应该是获取到多个更新,之后进行批量更新;如果同步更新了state,但是还没有执行...会返回新StateState—旦有变化,Store就会调用监听函数,来更新View以 store 核心,可以把它看成数据存储中心,但是他要更改数据时候不能直接修改,数据修改更新角色由Reducers

1.2K10

社招前端二面react面试题集锦

因此在这些阶段发岀Ajax请求显然不是最好选择。在组件尚未挂载之前,Ajax请求无法执行完毕,如果此时发出请求,意味着在组件挂载之前更新状态(如执行 setState),这通常是不起作用。...redux有什么缺点一个组件所需要数据,必须由父组件传过来,不能像flux中直接从store取。...但是这种写法很少使用,并不是常用写法。React允许对 setState方法传递一个函数,它接收到先前状态和属性数据并返回一个需要修改状态对象,正如我们在上面所做那样。...尽量不要在 componentWillReviceProps 里使用 setState,如果一定要使用,那么需要判断结束条件,不然会出现无限重渲染,导致页面崩溃3....给组件添加ref时候,尽量不要使用匿名函数,因为当组件更新时候,匿名函数会被当做新prop处理,让ref属性接受到新函数时候,react内部会先清空ref,也就是会以null回调参数先执行一次ref

2K60

2022高频前端面试题(附答案)

​前端面试题视频讲解react有什么特点react使用虚拟DOM,不是真实DOMreact可以用服务器渲染react遵循单向数据流 或者数据绑定约束性组件( controlled component...根据表单数据存储位置,组件分成约東性组件和非约東性组件。...如下所示, username没有存储在DOM元素内,而是存储在组件状态中。每次要更新 username时,就要调用 setState更新状态;每次要获取 username值,就要获取组件状态值。...这对于性能是有好处。这也意味着在更新DOM时, React不需要担心跟踪事件监听器。React- Router有几种形式?有以下几种形式。HashRouter,通过散列实现,路由要带#。...Virtual DOM厉害地方并不是说它比直接操作 DOM 快,而是说不管数据怎么变,都会尽量以最小代价去更新 DOM。

2.4K40
领券