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

useSelector不会将变量更新为其最新值

useSelector是React Redux中的一个钩子函数,用于从Redux的store中获取状态。它接收一个回调函数作为参数,该回调函数接收整个store的状态作为参数,并返回我们所关注的部分状态。

useSelector并不会将变量更新为其最新值,这是由于其工作原理决定的。Redux采用了不可变性的原则,每次发生状态变化时,都会创建一个全新的状态对象。因此,如果我们在组件中使用useSelector来获取某个状态值,当该状态值发生变化时,useSelector返回的是一个新的对象,并不是对前一个对象的引用。这就导致了在使用useSelector时,变量并不会自动更新为最新值。

为了解决这个问题,我们可以使用React Redux中的另一个钩子函数useEffect来监听状态的变化,并在变化时手动更新变量。具体做法是在useEffect的依赖数组中添加我们所关注的状态变量,当状态发生变化时,触发useEffect的回调函数,在回调函数中更新变量的值为最新值。

示例代码如下:

代码语言:txt
复制
import { useSelector, useEffect } from 'react-redux';

const MyComponent = () => {
  const selectedValue = useSelector(state => state.someValue);

  useEffect(() => {
    // 当selectedValue发生变化时,更新变量的值为最新值
    // 可以在这里执行相关的逻辑操作
    const updatedValue = selectedValue;
    // 更新变量的值
    // ...
  }, [selectedValue]);

  // 组件的其他代码
  // ...

  return (
    // 组件的JSX代码
    // ...
  );
};

export default MyComponent;

这样,我们就能够确保变量的值始终是最新的。当selectedValue发生变化时,useEffect的回调函数将被触发,我们可以在回调函数中更新变量的值为最新值,并执行相关的逻辑操作。

此外,需要注意的是,在使用useSelector时,我们可以使用第二个参数来进行数据的浅比较,以避免不必要的渲染。例如:

代码语言:txt
复制
const selectedValue = useSelector(state => state.someValue, shallowEqual);

这里的shallowEqual是React Redux提供的浅比较函数,用于比较前后两个状态值是否相等。若相等,则不会触发组件的重新渲染。

希望这个回答能够满足您的需求。如有更多问题,请随时提问。

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

相关·内容

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

注意,当 value 传递一个复杂对象时,若想要更新,必须赋予 value 一个新的对象引用地址,直接修改对象属性不会触发消费组件的重渲染。...当组件上层最近的 更新时,当前组件会触发重渲染,并读取最新传递给 Context Provider 的 context value 。...{ $$typeof: REACT_PROVIDER_TYPE, _context: context,};有了对象描述结构,接下来进入渲染流程并在 Reconciler/beginWork 阶段创建..._currentValue 中读取 value 。不过,除了读取 value 外,还会将 context 信息保存在当前组件 Fiber.dependencies 上。...对于 Context,当 Provider.value 发生更新后,它会查找子树找到消费组件,消费组件的 Fiber 节点标记 lane。

92740
  • react-redux Hook API 简介

    selector可以返回任何,不一定如mapState一样是个对象。而且这个返回即是useSelector()的返回。...当dispatch action后useSelector()会将之前的返回和现在的返回进行浅比较,注意使用的是reference equality ===来比较的,而connect是使用shallow...equality ==来比较的,如果相等的话就不更新UI,如果不相等就强制更新UI。...如果在一个函数组件中调用了多次useSelector(),就会生成多个独立的对store的订阅,但是因为react的批量更新机制,当每次dispatch action时,还是只返回一个新。...注意不要用useSelector()中的selector以整个对象的形式返回store state,因为每次返回的都是一个新对象,依据第五条的比较方式来说,肯定会重新触发更新的,造成不必要的性能浪费。

    1.6K40

    react源码之深度理解React.Context

    注意,当 value 传递一个复杂对象时,若想要更新,必须赋予 value 一个新的对象引用地址,直接修改对象属性不会触发消费组件的重渲染。...当组件上层最近的 更新时,当前组件会触发重渲染,并读取最新传递给 Context Provider 的 context value 。...{ $$typeof: REACT_PROVIDER_TYPE, _context: context,};有了对象描述结构,接下来进入渲染流程并在 Reconciler/beginWork 阶段创建..._currentValue 中读取 value 。不过,除了读取 value 外,还会将 context 信息保存在当前组件 Fiber.dependencies 上。...react-redux useSelector 则是采用订阅 redux store.state 更新,去通知消费组件「按需」进行重渲染(比较所依赖的 state 前后是否发生变化)。

    1.2K30

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

    } } dispatch({ type: 'INIT' }); return { dispatch, getState, }; } 复制代码 它就是利用闭包管理了state等变量...虽然这种情况可以用useMemo进行优化,但是手动优化和管理依赖必然会带来一定程度的心智负担,而在手动优化的情况下,肯定无法达到上面动图中的重渲染优化。...checkForceUpdate中,从latestSelectedState拿到上一次selector的返回,再利用selector(store)拿到最新,两者利用equalityFn进行比较。...// 从store中拿到最新 const newSelectedState = selector(store.getState()); // 如果比较相等,就啥也不做 if...(equalityFn(newSelectedState, latestSelectedState.current)) { return; } // 否则更新ref中保存的上一次渲染的

    2.1K20

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

    注意,当 value 传递一个复杂对象时,若想要更新,必须赋予 value 一个新的对象引用地址,直接修改对象属性不会触发消费组件的重渲染。...当组件上层最近的 更新时,当前组件会触发重渲染,并读取最新传递给 Context Provider 的 context value 。...{ $$typeof: REACT_PROVIDER_TYPE, _context: context,};有了对象描述结构,接下来进入渲染流程并在 Reconciler/beginWork 阶段创建..._currentValue 中读取 value 。不过,除了读取 value 外,还会将 context 信息保存在当前组件 Fiber.dependencies 上。...react-redux useSelector 则是采用订阅 redux store.state 更新,去通知消费组件「按需」进行重渲染(比较所依赖的 state 前后是否发生变化)。

    67410

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

    注意,当 value 传递一个复杂对象时,若想要更新,必须赋予 value 一个新的对象引用地址,直接修改对象属性不会触发消费组件的重渲染。...当组件上层最近的 更新时,当前组件会触发重渲染,并读取最新传递给 Context Provider 的 context value 。...{ $$typeof: REACT_PROVIDER_TYPE, _context: context,};有了对象描述结构,接下来进入渲染流程并在 Reconciler/beginWork 阶段创建..._currentValue 中读取 value 。不过,除了读取 value 外,还会将 context 信息保存在当前组件 Fiber.dependencies 上。...react-redux useSelector 则是采用订阅 redux store.state 更新,去通知消费组件「按需」进行重渲染(比较所依赖的 state 前后是否发生变化)。

    93740

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

    注意,当 value 传递一个复杂对象时,若想要更新,必须赋予 value 一个新的对象引用地址,直接修改对象属性不会触发消费组件的重渲染。...当组件上层最近的 更新时,当前组件会触发重渲染,并读取最新传递给 Context Provider 的 context value 。...$$typeof: REACT_PROVIDER_TYPE, _context: context, }; 有了对象描述结构,接下来进入渲染流程并在 Reconciler/beginWork 阶段创建..._currentValue 中读取 value 。 不过,除了读取 value 外,还会将 context 信息保存在当前组件 Fiber.dependencies 上。...react-redux useSelector 则是采用订阅 redux store.state 更新,去通知消费组件「按需」进行重渲染(比较所依赖的 state 前后是否发生变化)。

    63540

    在React项目中全量使用 Hooks

    效果同 this.state 与this.setState,区别是 useState 传入的并不一定要对象,并且在更新的时候不会把当前的 state 与旧的 state 合并。...useReduceruseReducer 接收两个参数,第一个是 reducer 函数,通过该函数可以更新 state,第二个参数 state 的初始,是 useReducer返回的数组的第一个,...,那么useEffect第一个参数的回调将会被再执行一遍,这里要注意的useEffect 的返回函数并不只是再组件卸载的时候执行,而是在这个 useEffect 被更新的时候也会调用,例如上述 count...,会带来一个冲突,所以我们需要一个能在函数组件声明周期内部的变量,可以使用 useState 中的 state 但是 state 发生变化组件也会随之刷新,在有些情况是不需要刷新的,只是想单纯的存一个...但当子组件 Function 组件时,ref 能拿到什么,总不可能是 function 内定义的方法、变量

    3K51

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

    注意,当 value 传递一个复杂对象时,若想要更新,必须赋予 value 一个新的对象引用地址,直接修改对象属性不会触发消费组件的重渲染。...当组件上层最近的 更新时,当前组件会触发重渲染,并读取最新传递给 Context Provider 的 context value 。...{ $$typeof: REACT_PROVIDER_TYPE, _context: context,};有了对象描述结构,接下来进入渲染流程并在 Reconciler/beginWork 阶段创建..._currentValue 中读取 value 。不过,除了读取 value 外,还会将 context 信息保存在当前组件 Fiber.dependencies 上。...react-redux useSelector 则是采用订阅 redux store.state 更新,去通知消费组件「按需」进行重渲染(比较所依赖的 state 前后是否发生变化)。

    91620

    【译】如何结合React Hooks来使用Redux

    这意味着我们可以使用 React 的最新最佳实践。 Hooks 让我们相同的功能编写更少的代码。我们需要编写的代码越少,我们就可以越快地启动应用程序。...为了简单起见,我们只有一个状态, toggle 是一个布尔。 用Redux切换复选框 如果您对 hooks 有一定的了解,那么您可能知道 hooks 需要在函数组件中使用。...第1步 - 将类组件重构函数组件 将 React 组件从类转换到函数组件是相当简单的。...使用 useDispatch 相对简单,我们将 hook 实例保存在一个变量下。我们可以在任何事件监听器中调用 dispatch 函数。...您成功地从类重构使用 hooks。为了确保一切正常工作,让我们再测试一次 toggle。 是的,一切正常。

    2.7K30

    Redux with Hooks

    前言 React在16.8版本我们正式带来了Hooks API。什么是Hooks?简而言之,就是对函数式组件的一些辅助,让我们不必写class形式的组件也能使用state和其他一些React特性。...既然Hooks大法这么好,赶紧上车试试怎么行呢?于是本人把技术项目的react和react-dom升级到了16.8.6版本,并按官方建议,渐进式地在新组件中尝试Hooks。...使用React-Redux的hooks APIs(推荐) 既然前面几种方案或多或少都有些坑点,那么不妨尝试一下React Redux在v7.1.0版本我们带来的官方hooks APIs,下面就展示下基本用法...返回会作为useSelector的返回,但与mapStateToProps不同的是,前者可以返回任何类型的(而不止是一个对象),此外没有第二个参数ownProps(因为可以在组件内通过闭包拿到)...是的,memo能为我们守住来自props的更新,然而state是在组件内部通过useContext这个hook注入的,这么一来就会绕过最外层的memo。 那么有办法可以避免这种强制更新吗?

    3.3K60

    ReactReactNative 状态管理终于懂了!redux redux-toolkit 与 rematch 对比总结

    状态管理,就是提供状态的这些操作: 初始化状态 initState 获取状态 useSelector 根据状态展示 UI 根据操作更新状态 dispatch + action...Store 对象; createSlice:管理分片全局状态的函数,返回是一个分片对象,该对象上最重要的两个属性是: actions:创建分片 action 的函数集合 action...名一般 slice 名 + action key reducer:已经创建好的分片 reducer 核心点 redux-toolkit 是怎么简化代码的呢?...:从 Store 中获取某个状态,参数是个函数,返回需要的变量 store.getState() 获取所有状态,建议 useDispatch:用于发送指令的钩子函数,返回是 dispatch...开发人员应根据项目的特定要求和约束来选择最适合需求的方案。

    2.1K60

    如何在 React 应用中使用 Hooks、Redux 等管理状态

    React 导入钩子(hook):import { useState } from 'react' 然后我们初始化状态:const [count, setCount] = useState(0) 在这里,我们状态提供了一个变量名...在更新状态后读取状态的正确方法是使用 useEffect hook。它允许我们在每个组件重新渲染后(默认情况下)或在我们声明更改的任何特定变量之后执行一个函数。...这样可以确保要更新最新的,并使我们远离上述问题。每次我们对先前的状态执行更新时,我们都应该使用这种方法。 管理规模和复杂性 到目前为止,状态管理似乎是小菜一碟。...我们我们的状态声明一个变量(在我们的例子中是'state'),和一个我们将用来修改这个变量的函数('dispatch'),然后 useReducer 将接收上面的 reducer 函数 作为第一个参数...Jotai Jotai 是一个 React 构建的开源状态管理库,灵感来自 Recoil。

    8.5K20

    超性感的React Hooks(七)useReducer

    初始化设置0 在redux中,我们称这样的状态Store const initialState: number = 0; 然后我们需要定义一个Reducer,Reducer是一个函数。...state - 1; case 'reset': return 0; default: return state; } } Reducer函数接收两个参数,第一个参数是当前的最新状态...onClick={() => dispatch('reset')}>重置 ); } 从useReducer的返回结果中,我们能够通过解构拿到当前Store的最新...dispatch接收Action作为参数,当dispatch调用时,会将Action告诉Reducer,Reducer通过Action修改Store。一个简单useReducer使用案例就完成了。...分享一个小的知识点: useState在更新时,源码中调用的方法叫做updateReducer,而在useReducer的实现中,也调用了同样的方法。 ? ?

    2.2K20

    学习react-redux,看这篇文章就够啦!

    每个 reducer 函数负责管理和更新应用中的一部分状态。...只负责 UI 的呈现,不带有任何业务逻辑 没有状态(即不使用 this.state 这个变量) 所有数据都由参数(this.props)提供 不使用任何 Redux 的 API 下面就是一个 UI 组件的例子...在组件内部,直接访问 onclick 方法,即可触发 reducer 内操作(更新、修改数据等) mapDispatch 作为对象,它的每个键名对应的 UI 组件的同名参数,应该是一个函数。...get_table", // type 字段actions 类型 flter: flter, // filter 提交参数 }), }; # mapDispatch 高阶用法 bindActionCreators...下面是常用的 hooks 函数以及用法 # useSelector useSelector:用于选择 Redux store 中感兴趣的状态。它接受一个选择器函数作为参数,并返回选择器函数返回的

    28420

    158. 精读《Typescript 4》

    1 引言 随着 Typescript 4 Beta 的发布,又带来了许多新功能,其中 Variadic Tuple Types 解决了大量重载模版代码的顽疾,使得这次更新非常有意义。...partialCall(f, ...headArgs) { return (...tailArgs) => f(...headArgs, ...tailArgs); } 我们可以通过上面的特性对进行类型定义...: string, ...rest: any[]]; Class 从构造函数推断成员变量类型 构造函数在类实例化时负责一些初始化工作,比如成员变量赋值,在 Typescript 4,在构造函数里对成员变量的赋值可以直接成员变量推导类型...拿笔者的场景来说,函数 useDesigner 作为自定义 React Hook 与 useSelector 结合支持 connect redux 数据流的调用方式是这样的: const nameSelector......selector(state), }; }, {}) ) as any; }; 可以看到,最大的变化是不需要写四遍重载了,但由于场景和 concat 不同,这个例子返回不是简单的

    77120

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

    详细一些: Redux会将整个应用状态(其实也就是数据)存储到Store Store里面保存一棵状态树(state tree) 组件改变state的唯一方法是通过调用store的dispatch方法,触发一个...2.逻辑组件看上去很乱,不清晰的原因state和dispatch没有各自写在一起,重复代码有点多,直观。...3.React 组件从 Redux store 中读取数据,向 store 中分发 actions 更新数据还不够方便。...- 不能像以前那样在mapDispatchToProps中,action creator提供依赖注入 对于有可能是复杂应用的:许多公司的项目大部分都是用的redux管理状态,他的许多优点比如单一数据源...批处理更新,使得多个useSelector()重新计算出state,组件只会重新渲染一次,不用担心useSelector重复渲染问题。

    1.4K00

    redux、mobx、concent特性大比拼, 看后生如何对局前辈

    当应用存在多个store时(这里我们可以把一个store理解成redux里的一个reducer块,聚合了数据、衍生数据、修改行为),mobx的store获取方式有多种,例如在需要用的地方直接引入放到成员变量上...,即精确更新,所以vue某些测试方面会胜出react,当我们react插上依赖收集的翅膀后,看看会有什么更有趣的事情发生吧。...shouldcomponent判断时,总是会从上往下全部渲染一遍,而redux的cconnect接口接管了shouldcomponent行为,当一个action触发了动作修改时,所有connect过的组件都会将上一刻...mapStateToProps得到的状态和当前最新mapStateToProps得到的状态做浅比较,从而决定是否要刷新包裹的子组件。...(state => state.login); const fullName = useSelector(selectFullName); const nickName = useSelector

    4.6K61

    152. 精读《recoil》

    然而 React Immutable 特性带来的可预测性非常利于调试和维护: 断点调试时变量与当前执行位置无关,已创建过的不会突然 Mutable 突变,非常可预测。...在 React 框架下组件更新机制单一,只有引用变化才触发重渲染,而没有 Mutable 模式下 ForceUpdate 的心智负担。...这也导致 Recoil API 偏多被诟病,这也是 Immutable 模式下存的编码心智负担,虽然很好理解,但也只有 useSelector 或 Recoil 这样拆分 API 的方式可以解决。...仅读订阅 与 ReactRedux 的 useStore 类似,Recoil 提供了 useRecoilCallback 用于只读订阅场景: import { atom, useRecoilCallback...Immutable 模式中,对数据流只有读与写两种诉求,而申明式编程讲究的是数据变化后 UI 自动 Rerender,那么对数据的读自然而然就被赋予了订阅变化后触发 Rerender 的期待,但是写与读不同

    81610
    领券