开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

是否禁止`useSelector`重新渲染组件？

是否禁止useSelector重新渲染组件是一个关于React Redux中的useSelector钩子的问题。useSelector是React Redux提供的一个用于从Redux store中选择并订阅状态的钩子函数。

答案：不应该禁止useSelector重新渲染组件。useSelector的作用是根据Redux store中的状态变化来重新渲染组件，它是React Redux中非常常用的一个钩子函数。

useSelector的工作原理是通过传入一个选择器函数来选择需要订阅的状态，当选择器函数返回的值发生变化时，组件会重新渲染。这使得组件能够根据Redux store中的状态动态地更新自己的UI。

禁止useSelector重新渲染组件可能会导致以下问题：

组件无法及时获取到最新的状态：如果禁止重新渲染，组件无法及时响应Redux store中状态的变化，可能导致UI不一致或数据错误。
组件无法获得正确的性能优化：useSelector的重新渲染是通过浅比较来判断状态是否变化，只有在状态实际发生变化时，组件才会重新渲染。这样可以避免不必要的重新渲染，提高性能。
组件无法享受到React Redux的其他特性：useSelector是React Redux提供的一种便利方式，可以让组件更轻松地使用Redux中的状态。禁止重新渲染将使组件失去这些便利性和特性。

总结来说，useSelector重新渲染组件是React Redux中的正常行为，它能够保证组件能够及时响应Redux store中状态的变化，并享受到React Redux的其他特性。在大多数情况下，不应该禁止useSelector重新渲染组件。

推荐的腾讯云相关产品和产品介绍链接地址：腾讯云函数计算（Serverless）：https://cloud.tencent.com/product/scf 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb 腾讯云网络安全产品：https://cloud.tencent.com/series/12 腾讯云人工智能平台（AI Lab）：https://ai.tencent.com/ailab/ 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iotexplorer 腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos 腾讯云区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain 腾讯云虚拟私有网络（VPC）：https://cloud.tencent.com/product/vpc

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

有帮助

没帮助

相关·内容

详解强制Vue组件重新渲染的方法

在某些情况下，我们必须强制Vue重新渲染组件虽然Vue不会自动更新这种情况是相对比较少，但是知道如何在出现这个问题时修复它还是很有用的。...这节，我们就来做一些之前很少做过或者没做过的：用 key 来让组件重新渲染。...在这篇文章中，会涉及到这几个知识点： key 是如何改变组件 key 如何与多个子组件一起工作如何强制子组件自己更新通过改变 key 的值来重新渲染组件我最喜欢的方法是使用key属性，因为使用key...当componentKey 的值发生改变时，Vue 就知道把ComponentToReRender组件删除并创建一个新组件。这样ComponentToReRender就会重新渲染并重置里面的状态。...child === 2) { this.key2 += 1; } } } } 这里我们使用了两个单独 key 来分别控制每个子组件是否重新渲染

4.3K3 0

Vue 中强制组件重新渲染的正确方法

---- 有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？...强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。这是一个非常简单的解决方案。...所以就像上一个方法，如果你需要这个来重新渲染你的组件，可能有一个更好的方法。...更改 key 以强制重新渲染组件最后，这是强制Vue重新渲染组件的最佳方法（我认为）。我们可以采用这种将key分配给子组件的策略，但是每次想重新渲染组件时，只需更新该key即可。...当这种情况发生时，Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。如果确实需要重新渲染某些内容，请选择key更改方法而不是其他方法。

7.8K2 0

基础 | React怎么判断什么时候该重新渲染组件？

我们可以通过告诉React什么时候需要渲染什么时候不需要渲染来帮助React。让我们依次来看看这些。 1. 组件的状态发生改变只有在组件的state变化时才会出发组件的重新渲染。...组件获得新的状态然后React决定是否应该重新渲染组件。不幸的是，React难以置信简单地将默认行为设计为每次都重新渲染。组件改变？重新渲染。父组件改变？重新渲染。...但是，React不能知道什么时候可以安全的跳过重新渲染，所以React无论是否重要每次都重新渲染。我们如何告诉React跳过重新渲染？那就是第二点要说的内容。...当React将要渲染组件时他会执行shouldComponentUpdate方法来看它是否返回true（组件应该更新，也就是重新渲染）。...当React渲染Todo组件（通过setState触发）他会首先检查状态是否改变（通过props和state）。

2.9K1 0

vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染

1在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法 props: { echartStyle: { type: Object, default() {...ref="str" 来声明组件，然后通过this....$refs.str.method()在值改变的地方来调用子组件中的方法来重新渲染（暂时使用有bug，不能够及时渲染,父组件值已经改变了，但是子组件值仍然没有改变，不能够及时渲染）这个方法感觉props...’接收数据在调用方法之后，明明父组件的值已经改变了，但是父组件在调用子组件方法时，数据仍然没有接收到，调用之后才接收到，这个方法暂且没用，应该是声明ref的时候声明的是当前组件的实例，然后调用时调用的也是值未改变时的属性...这个没什么用，可以用来调用子组件方法。

2.9K3 0

146. 精读《React Hooks 数据流》

这个原因是 Counter.useContainer 提供的数据流是一个引用整体，其子节点 foo 引用变化后会导致整个 Hook 重新执行，继而所有引用它的组件也会重新渲染。...但 useSelector 的作用仅仅是计算结果不变化时阻止组件刷新，但并不能保证返回结果的引用不变化。...答案是会变，因为 user 对象在每次数据流更新都会变，useSelector 在 deepEqual 作用下没有触发重渲染，但因为全局 reducer 隐去组件自己的重渲染依然会重新执行此函数，此时拿到的...3 次方次，那组件的重渲染时间消耗与查询时间相比完全不值一提，我们需要考虑缓存查询函数。...此时我们要告诉引用，state.user 是否变化才是重新执行的关键： import { createSelector } from "reselect"; const userSelector =

7322 0

React Native中FlatList组件不重新渲染Item解决方法

场景今天在写一个点击TouchableOpacity调用函数重新渲染图表的功能，一开始是点击之后图表可以正常切换但是TouchableOpacity颜色没有变化解决方法给FlatList指定

2K1 0

React-Redux 100行代码简易版探究原理。（面试热点，React Hook + TypeScript实现）

StoreContext，所以聊天室组件也会被强制重新渲染，这就造成了性能浪费。...使用本文的项目就上述性能场景提炼而成，由聊天室组件，用了store中的count 计数器组件，用了store中的message 控制台组件，用来监控组件的重新渲染。...实现用最简短的方式实现代码，探究react-redux为什么能在count发生改变的时候不让使用了message的组件重新渲染。...在性能章节也提到过，大型应用中必须做到只有自己使用的状态改变了，才去重新渲染，那么equalityFn就是判断是否渲染的关键了。...根据比较，判断是否需要强制渲染组件。

2.1K2 0

在React项目中全量使用 Hooks

区别就是这，那么应用场景肯定是从区别中得到的，useLayoutEffect在渲染前执行，也就是说我们如果有状态变了需要依据该状态来操作DOM，为了避免状态变化导致组件渲染，然后更新 DOM 后又渲染，...当然这个不只是状态的改变，在任何导致组件重新渲染，而且又要改变 DOM的情况下都是 useLayoutEffect的使用场景。...，如果将此函数传递到子组件时，每次父组件渲染此函数更新，就会导致子组件也重新渲染，可以通过传递第二个参数以避免一些非必要性的渲染。...= () => { const userInfo = useSelector(state => state.userInfo, shallowEqual); // ...}useSelector...的第二个参数是一个比较函数，useSelector 中默认使用的是 ===来判断两次计算的结果是否相同，如果我们返回的是一个对象，那么在 useSelector 中每次调用都会返回一个新对象，所以所以为了减少一些没必要的

3K5 1

react源码分析：深度理解React.Context

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。...当组件（函数组件）进入 Reconciler/beginWork 阶段进行处理时，不满足 bailout，就会重新被调用进行重渲染，这时执行 useContext，就会拿到最新的 context....Context 会通过 Object.is()，即 === 来比较前后 value 是否严格相等。这里可能会有一些陷阱：当注册 Provider 的父组件进行重渲染时，会导致消费组件触发意外渲染。...react-redux useSelector 则是采用订阅 redux store.state 更新，去通知消费组件「按需」进行重渲染（比较所依赖的 state 前后是否发生变化）。...react-redux useSelector 则是采用订阅 redux store.state 更新，去通知消费组件「按需」进行重渲染（比较所依赖的 state 前后是否发生变化）。

9274 0

react-redux Hook API 简介

在跟着redux教程实现Reddit API实例时(参考文章1)，想着把类组件用函数组件给改写一下，于是就去看了react-redux的Hook API，最主要就是useSelector、useDispatch...useSelector()还订阅了store，所以除了在函数组件被渲染时会被调用，当每次dispatch action时也会被调用。...如果在一个函数组件中调用了多次useSelector()，就会生成多个独立的对store的订阅，但是因为react的批量更新机制，当每次dispatch action时，还是只返回一个新值。...注意不要用useSelector()中的selector以整个对象的形式返回store state，因为每次返回的都是一个新对象，依据第五条的比较方式来说，肯定会重新触发更新的，造成不必要的性能浪费。...需要注意的是，当将触发函数通过props传入到子组件中，在子组件中触发时，要使用callback Hook以避免不必要的渲染。

1.6K4 0

【小狮子前端】「Redux」概念理解+实战上手（内含大量实例）

树中读取部分数据，并通过 props 来把这些数据提供给要渲染的组件。...那来看看他的一些好处吧：当然是配合hooks写代码更简洁性能上延续redux以前的性能优化逻辑，比较props，如果当前的props跟老的props相同，则组件将不会重新渲染。...批处理更新，使得多个useSelector()重新计算出state，组件只会重新渲染一次，不用担心useSelector重复渲染问题。...dispatch(increaseAction)}>Increase ); 由于匿名函数的性质，每次重新渲染获得新的引用...，如果作为props传递给子组件，那么子组件每次都要重新渲染。

1.4K0 0

手摸手教你基于Hooks 的 Redux 实战姿势

要从 store 中取出数据，请使用 react-redux 提供的自定义 hook ：useSelector 。...selector 只是一个有趣的词：“从 store 获取数据的功能” 然后，向 useSelector 中传入回调，该回调中可获取整个 redux 的状态，您只需选择该组件所需的内容 ?...重要的是，reducer 返回一个新的状态对象（而不是修改旧的对象的属性），这样，当对象中的属性发生某些改变时，组件将重新渲染。...所有连接的组件（调用 useSelector ）将自动获得新的状态就像 props 或者 state 改变一样 - useSelector 将自动检测更改，React 将重新渲染组件。...Redux 可以以更复杂的方式使用，但核心始终是： •1、向 store 发送 action•2、通过 reducer 可能会或可能不会改变状态•3、使用选择器访问状态•4、状态的改变将自动重新刷新您的应用

1.5K2 0

Redux with Hooks

props; useEffect(() => { // 请求表单数据 queryFormData(formId); }, // 指定依赖，防止组件重新渲染时重复请求...然而正如前文提到的，mapStateToProps中的ownProps参数同样会引起mapStateToProps的重新调用，产生新的state props： // 此函数在connected组件接收到...两者的用法相近，但如果你想后者像前者一样返回一个对象的话要特别注意：由于useSelector内部默认是使用===来判断前后两次selector函数的计算结果是否相同的（如果不相同就会触发组件re-render...然而，上述代码其实有性能隐患：无论我们点击还是去派发一个action，最终结果是和都会被重新渲染！...把全局的State按需求拆分到不同的context，那么自然不会相互影响导致无谓的重渲染；把组件拆成两个，里层的用memo包裹： const Header = () => { const {

3.3K6 0

学习react-redux，看这篇文章就够啦！

i redux react-redux @types/redux-thunk @types/redux-logger 依次安装 redux、集成 react 的 redux、因 redux 中的禁止使用异步和打印...在 React 组件内部获取 Redux 的 store 有几种常见的方式：使用react-redux库中的useSelector Hook： import { useSelector } from...在组件内部，我们通过映射关系的 props，可以获取到 state 中的数据。 mapStateProps 会订阅 Store ，每当 store 更新时，会重新计算 UI 组件参数，重新渲染组件。...JSX ); }; # 搭配 react hooks # useEffect useEffect：React 自带的钩子函数，用于在组件渲染完成后执行副作用操作。...JSX ); }; # useMemo useMemo：React 自带的钩子函数，用于在组件渲染过程中进行记忆化计算，以提高性能。

2812 0

使用useSelector useDispatch 替代connect

increment-counter' })}> Increment counter ) } 将回调使用dispatch传递给子组件时...，建议使用来进行回调useCallback，因为否则，由于更改了引用，子组件可能会不必要地呈现。...onIncrement}>Increment counter )) useStore() const store = useStore() 这个Hook返回redux 组件的...(()=>{ dispatch({ type:'user/fetchUser',payload:{} }) },[]) // 渲染页面...(()=>{ dispatch({ type:'user/fetchUser',payload:{} }) },[]) // 渲染页面

4.8K2 0

react源码之深度理解React.Context

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。...当组件（函数组件）进入 Reconciler/beginWork 阶段进行处理时，不满足 bailout，就会重新被调用进行重渲染，这时执行 useContext，就会拿到最新的 context....Context 会通过 Object.is()，即 === 来比较前后 value 是否严格相等。这里可能会有一些陷阱：当注册 Provider 的父组件进行重渲染时，会导致消费组件触发意外渲染。...react-redux useSelector 则是采用订阅 redux store.state 更新，去通知消费组件「按需」进行重渲染（比较所依赖的 state 前后是否发生变化）。...提供给 Context.Provider 的 value 对象地址不会发生变化，这使得子组件中使用了 useSelector -> useContext，但不会因顶层数据而进行重渲染。

1.2K3 0

同学，请专业点，用Hooks解耦UI组件吧

文章系翻译，原文见阅读原文你肯定看过（或写过）这样的渲染模式：通过AJAX请求数据时渲染一个loading占位图标当数据返回后重新渲染组件让我们一个使用Fetch API的简单例子： import...这是否意味着同样的渲染逻辑要重复写n次呢？解耦数据请求怎么可能，让我们将数据请求部分抽离为一个自定义hook——useSomeData。...此时只需要简单的修改下useSomeData，完全不需要改动业务组件： import React, { useEffect } from 'react'; import { useDispatch, useSelector.../to/data/action'; const useSomeData = () => { const dispatch = useDispatch(); const someData = useSelector...useSomeData实际上为使用他的业务组件提供了一个接口。开发者不需要关心useSomeData的实现原理，只需要关注接收到的数据、加载状态、错误信息即可。

6692 0

React-Redux 100行代码简易版探究原理。

那 redux 的实现简单了，react-redux 的实现肯定就需要相对复杂，它需要考虑如何和 react 的渲染结合起来，如何优化性能。...目标本文目标是尽可能简短的实现react-reduxv7 中的 hook 用法部分Provider, useSelector, useDispatch方法。...StoreContext，所以聊天室组件也会被强制重新渲染，这就造成了性能浪费。...使用本文的项目就上述性能场景提炼而成，由聊天室组件，用了 store 中的count 计数器组件，用了 store 中的message 控制台组件，用来监控组件的重新渲染。...= useCallback(() => dispatch({ type: 'add' }), []); dispatch({ type: 'log', payload: '计数器组件重新渲染

7002 2

react源码分析：深度理解React.Context_2023-02-28

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。...当组件（函数组件）进入 Reconciler/beginWork 阶段进行处理时，不满足 bailout，就会重新被调用进行重渲染，这时执行 useContext，就会拿到最新的 context....Context 会通过 Object.is()，即 === 来比较前后 value 是否严格相等。这里可能会有一些陷阱：当注册 Provider 的父组件进行重渲染时，会导致消费组件触发意外渲染。...react-redux useSelector 则是采用订阅 redux store.state 更新，去通知消费组件「按需」进行重渲染（比较所依赖的 state 前后是否发生变化）。...提供给 Context.Provider 的 value 对象地址不会发生变化，这使得子组件中使用了 useSelector -> useContext，但不会因顶层数据而进行重渲染。

6354 0

react源码分析：深度理解React.Context_2023-02-07

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。...当组件（函数组件）进入 Reconciler/beginWork 阶段进行处理时，不满足 bailout，就会重新被调用进行重渲染，这时执行 useContext，就会拿到最新的 context....Context 会通过 Object.is()，即 === 来比较前后 value 是否严格相等。这里可能会有一些陷阱：当注册 Provider 的父组件进行重渲染时，会导致消费组件触发意外渲染。...react-redux useSelector 则是采用订阅 redux store.state 更新，去通知消费组件「按需」进行重渲染（比较所依赖的 state 前后是否发生变化）。...提供给 Context.Provider 的 value 对象地址不会发生变化，这使得子组件中使用了 useSelector -> useContext，但不会因顶层数据而进行重渲染。

6741 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭