开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

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

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

可维护性下降：全局变量会增加代码的复杂性，使得代码难以理解和维护。当多个组件都依赖于同一个全局变量时，修改全局变量的逻辑会变得复杂，并且很难追踪数据的变化。
可复用性下降：将数据存储为全局变量会使得组件之间的耦合度增加，降低了组件的可复用性。当需要在其他组件中使用相同的数据时，需要引入全局变量，导致代码的耦合性增加。
性能问题：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.3K2 0

React面试八股文（第一期）

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

3.1K3 0

react面试题笔记整理

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

2.7K3 0

高级前端常考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.Children为null或者undefined的情况

1.8K3 1

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

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

4K2 0

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.2K2 0

React高频面试题梳理，看看面试怎么答？（上）

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

1.7K2 1

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

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

1.5K2 0

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

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

2.2K4 0

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

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

2.9K3 0

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

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

2.2K1 0

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

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

1.5K3 0

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

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

1.4K2 1

react高频面试题总结（附答案）

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

2.2K4 0

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

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

1.3K2 0

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

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

2K6 0

React高频面试题（附答案）

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

1.5K2 1

react相关面试知识点总结

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

1.1K5 0

这些react面试题你会吗，反正我回答的不好

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

1.2K1 0

2022高频前端面试题（附答案）

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

2.4K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭