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

Redux不会触发重新渲染-即使我没有在reducer中改变我的状态

Redux是一个用于JavaScript应用程序的状态管理库。它通过一个单一的全局状态树来管理应用程序的状态,并使用纯函数来处理状态的变化。Redux的核心概念包括store、action和reducer。

  • Store:Redux中的store是一个包含应用程序状态的对象。它是唯一的,负责存储整个应用程序的状态树,并提供了一些方法来访问和更新状态。
  • Action:Action是一个描述状态变化的普通JavaScript对象。它必须包含一个type属性,用于指示要执行的操作类型,以及可选的payload属性,用于传递与操作相关的数据。
  • Reducer:Reducer是一个纯函数,它接收当前的状态和一个action作为参数,并返回一个新的状态。Reducer根据action的类型来决定如何更新状态,并且必须返回一个新的状态对象而不是修改原始状态。

根据提供的问答内容,如果Redux没有在reducer中改变状态,那么Redux不会触发重新渲染。这是因为Redux的状态更新是通过reducer函数返回一个新的状态对象来实现的。如果reducer没有改变状态,那么Redux会认为状态没有发生变化,因此不会触发重新渲染。

然而,需要注意的是,即使状态没有改变,React组件也可能会重新渲染。这是因为React组件的重新渲染是由其props或state的任何变化触发的,而不仅仅是Redux状态的变化。因此,如果Redux状态没有改变,但是组件的其他props或state发生了变化,组件仍然可能会重新渲染。

总结一下,Redux不会触发重新渲染,如果在reducer中没有改变状态。但是,需要注意React组件的重新渲染可能受到其他因素的影响。

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

相关·内容

浅谈 React、Flux 与 Redux

跟 view 之间对应关系(一个 state 变化可能引起多个 view 变化,一个 view 上面触发事件可能引起多个 state 改变)。...通过注册回调,Store 响应那些与他们所保存状态有关 Action。然后 Store 会触发一个 change 事件,来提醒 controller-views 数据已经发生了改变。...这些 controller-views 调用他们自己 setState() 方法,重新渲染自身以及组件树上所有后代组件。...使用 Flux 有个好处就是只需要用 action 对象向 Dispatcher 描述当前事件就可以执行对应逻辑,因为 Dispatcher 是所有 Action 处理中心,即使没有对应事件发生...没有 Dispatcher Redux 没有 Dispatcher 概念,它使用 reducer 来进行事件处理,reducer 是一个纯函数,这个函数被表述为 (previousState,

45920

浅谈 React、Flux 与 Redux

跟 view 之间对应关系(一个 state 变化可能引起多个 view 变化,一个 view 上面触发事件可能引起多个 state 改变)。...通过注册回调,Store 响应那些与他们所保存状态有关 Action。然后 Store 会触发一个 change 事件,来提醒 controller-views 数据已经发生了改变。...这些 controller-views 调用他们自己 setState() 方法,重新渲染自身以及组件树上所有后代组件。...使用 Flux 有个好处就是只需要用 action 对象向 Dispatcher 描述当前事件就可以执行对应逻辑,因为 Dispatcher 是所有 Action 处理中心,即使没有对应事件发生...没有 Dispatcher Redux 没有 Dispatcher 概念,它使用 reducer 来进行事件处理,reducer 是一个纯函数,这个函数被表述为 (previousState,

64160

基础 | 浅谈 React、Flux 与 Redux

跟 view 之间对应关系(一个 state 变化可能引起多个 view 变化,一个 view 上面触发事件可能引起多个 state 改变)。...通过注册回调,Store 响应那些与他们所保存状态有关 Action。然后 Store 会触发一个 change 事件,来提醒 controller-views 数据已经发生了改变。...这些 controller-views 调用他们自己 setState() 方法,重新渲染自身以及组件树上所有后代组件。...使用 Flux 有个好处就是只需要用 action 对象向 Dispatcher 描述当前事件就可以执行对应逻辑,因为 Dispatcher 是所有 Action 处理中心,即使没有对应事件发生...没有 Dispatcher  Redux 没有 Dispatcher 概念,它使用 reducer 来进行事件处理,reducer 是一个纯函数,这个函数被表述为 (previousState,

36320

浅谈 React、Flux 与 Redux

跟 view 之间对应关系(一个 state 变化可能引起多个 view 变化,一个 view 上面触发事件可能引起多个 state 改变)。...通过注册回调,Store 响应那些与他们所保存状态有关 Action。然后 Store 会触发一个 change 事件,来提醒 controller-views 数据已经发生了改变。...这些 controller-views 调用他们自己 setState() 方法,重新渲染自身以及组件树上所有后代组件。...使用 Flux 有个好处就是只需要用 action 对象向 Dispatcher 描述当前事件就可以执行对应逻辑,因为 Dispatcher 是所有 Action 处理中心,即使没有对应事件发生...没有 Dispatcher Redux 没有 Dispatcher 概念,它使用 reducer 来进行事件处理,reducer 是一个纯函数,这个函数被表述为 (previousState, action

46620

Redux助力美团点评前端进阶之路

摘要 都说Redux好,但Redux到底好在哪,它真的解决了业务遇到问题吗? 因为在业务引入Redux而带来额外成本是否让你苦恼过? 会不会是我们打开Redux方式不对?...state和props任何变化都会触发组件重新渲染。 裸用React 每个组件都有自己本地state,而React间组件通信非常繁琐。...这是一个纯函数,意味着输入一个确定参数Props,它就会输出一个确定view。只要输入Props不变,那么输出view就一定不会改变。 ? React+Redux数据流 ?...action通过reducer来修改state,reducer必须为纯函数。 时间旅行 我们只要拿到最初始state和用户会话触发所有action,我们就能一一还原出本次会话所有空间状态。...“时间旅行”特性使状态管理变得非常容易。 文艺复兴 把2013年至今这段时间定义为“文艺复兴”时代,前端代码重新变得清晰有序,化繁为简。 但是Redux看似简单,用起来却不容易。

1.5K40

前端react面试题指北

浅比较会忽略属性和或状态突变情况,其实也就是数据引用指针没有变化,而数据发生改变时候render是不会执行。如果需要重新渲染那么就需要重新开辟空间引用数据。...使用pureComponent好处:当组件更新时,如果组件props或者state都没有改变,render函数就不会触发。省去虚拟DOM生成和对比过程,达到提升性能目的。...Reducer函数,以mutations变化函数取代Reducer,无需switch,只需在对应mutation函数里改变state值即可 Vuex由于Vue自动重新渲染特性,无需订阅重新渲染函数,...但是这里有个点值得关注,执行 setState 时候不一定会重新渲染。当 setState 传入 null 时,并不会触发 render。...,即使传入子组件 props 未发生变化,那么子组件也会重新渲染,进而触发 render (2)重新渲染 render 会做些什么?

2.5K30

react-hooks如何使用?

react-hooks是react16.8以后,react新增钩子API,目的是增加代码可复用性,逻辑性,弥补无状态组件没有生命周期,没有数据管理状态state缺陷。...useState和useReduce 作为能够触发组件重新渲染hooks,我们使用useState时候要特别注意是,useState派发更新函数执行,就会让整个function组件从头到尾执行一次...是不能够即使改变 */ } } > ) } 上边简单例子说明了useState ,但是当我们调用更新函数之后,state值是不能即时改变...redux useReducer 是react-hooks提供能够状态组件运行类似redux功能api,至于它到底能不能代替redux react-redux ,个人看法是不能redux...dispatch 触发触发组件更新,这里能够促使组件从新渲染一个是useState派发更新函数,另一个就 useReducerdispatch。

3.5K80

React和Redux——状态管理Flux和Redux

当Store状态改变时候,将会触发添加在监听器上回调函数this.onChange(),一般我们该回调函数调用this.state方法修改组件内部状态触发组件重新渲染。...而由于组件初始化时候已经添加了Store监听函数,组件State已经成为了Store某个状态映射;当Store改变时候将出发组件State修改进而触发组件重新渲染。...与Flux区别 ReduxRedux用一个单独Store对象保存这一整个应用状态,这个对象不能直接被改变。当一些数据变化了,通过Action和Reducer一个新对象就会被创建。...2、保持状态只读 Redux,如果想要修改组件状态达到驱动用户界面重新渲染目的不是通过this.setState去修改组件State状态而是创建一个新状态对象返回给Redux,由Redux来完成新状态渲染...Store更新将触发View回调函数重新渲染组件。这样就实现了使用“单向数据流”并将存储状态数据和状态计算分离达到提供可预测化状态管理目的。

1.8K80

Redux原理分析以及使用详解(TS && JS)

某个组件状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件状态 1.2、为什么要用Redux React,数据组件是单向流动,这是react...state是只读,唯一改变state方法就是触发action,action会dispatch分发给reducer 3、数据改变只能通过纯函数来执行 使用纯函数来执行修改,也就是reducer 纯函数是什么...4.2、redux-promise 使用redux-promise中间件,允许action是一个promise,promise,如果要触发action,则通过调用resolve来触发 4.3、redux-sage...,页面第一次会渲染,而不会说等待这个数据成功存入redux里面才会渲染页面。...从React页面渲染来说:页面肯定是先渲染不会关心dispatch,也不会关心action,只会关心store里面数据变化,其实也就是第一次useEffect时候,数据取得其实是初始值。

3.8K30

单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

但是这样有一个问题,就是数据改变后,不会留下变更过记录,这样不利于调试。...redux-saga 采用了另外一种思路,它没有把异步操作放在 action creator ,也没有去处理 reductor,而是把所有的异步操作看成“线程”,可以通过普通action去触发它,当操作完成时也会触发...由于Vue自动重新渲染特性,无需订阅重新渲染函数,只要修改State即可 Flux、Redux、Vuex 三个思想都差不多,具体细节上有一些差异,总的来说都是让 View 通过某种方式触发 Store...Vuex数据流顺序是: View调用store.commit提交对应请求到Store对应mutation函数->store改变(vue检测到数据变化自动渲染) redux 推荐使用 Object.assign...这样看来认为VUE是更推荐使用了VUEX框架每个组件内部都使用store,而React-Redux则提供了自由选择性。

3.6K40

React进阶(1)-理解Redux

对于技术性投入,从来都是不吝啬,主动学习是对自己最好投资 (Redux的确理解有些绕,但并不代表学不会,多读书,多实践,巩固基础) 反之,则以下则是没有必要使用Redux UI层非常简单,只是用于渲染...,无复杂数据交互,依赖外部props就可以渲染组件 用户使用方式比较简单,页面之间比较独立,没有互相协作 与服务器之间没有大量交互 当你发现使用React实在解决不了问题,各个组件之间传递数据非常复杂...Redux中有以下几个设计基本原则 单向数据流 唯一数据源 保持状态只读 数据改变只能通过纯函数reducer来完成 单向数据流: 这个其实与props不能直接被修改一样,父组件向子组件传递数据时是通过属性方式进行传递...状态,必须要通过派发(dispatch)一个action对象去完成 然后组件渲染对应界面要更改的话,实际更改就是组件状态,如果状态都是只能读不能修改的话,那么界面就不会更新变化了 想要更改用户界面的渲染...函数不光接受action为参数,还接受state参数,也就是说,Reduxreduce函数只负责计算组件状态,却不负责存储组件状态 Reducer函数往往包含action.type为判断条件

1.1K20

React进阶(1)-理解Redux

,这不区分于无论是外部props还是内部state,而组件之间有时需要共享传递数据,Redux仅仅就是用来管理这些组件状态 一些开发者眼里,项目里要是没有用到Redux,就觉得很low,要么把...,无复杂数据交互,依赖外部props就可以渲染组件 用户使用方式比较简单,页面之间比较独立,没有互相协作 与服务器之间没有大量交互 当你发现使用React实在解决不了问题,各个组件之间传递数据非常复杂...,触发动作,可以看做一个交互动作,改变应用状态或view更新,都需要通过触发action来实现,Action执行结果就是调用Dispatch来处理相应事情,实现页面视图view更新,唯一办法就是调用...状态,必须要通过派发(dispatch)一个action对象去完成 然后组件渲染对应界面要更改的话,实际更改就是组件状态,如果状态都是只能读不能修改的话,那么界面就不会更新变化了 想要更改用户界面的渲染...函数不光接受action为参数,还接受state参数,也就是说,Reduxreduce函数只负责计算组件状态,却不负责存储组件状态 Reducer函数往往包含action.type为判断条件

1.4K22

一天梳理完react面试题

但是这里有个点值得关注,执行 setState 时候不一定会重新渲染。当 setState 传入 null 时,并不会触发 render。...,就会触发一次额外渲染,多调用了一次 render 函数,由于它是浏览器刷新屏幕前执行,所以用户对此是没有感知,但是应当避免这样使用,这样会带来一定性能问题,尽量是 constructor...props 改变了,或组件内部调用了 setState/forceUpdate,会触发更新重新渲染,这个过程可能会发生多次。...这种组件React中被称为受控组件,受控组件,组件渲染状态与它value或checked属性相对应,react通过这种方式消除了组件局部状态,使整个状态可控。...React如何判断什么时候重新渲染组件?组件状态改变可以因为props改变,或者直接通过setState方法改变。组件获得新状态,然后React决定是否应该重新渲染组件。

5.4K30

前端二面高频react面试题集锦_2023-02-23

diff 虚拟DOM 比较规则 【旧虚拟DOM】 与 【新虚拟DOM】相同key 若虚拟DOM内容没有发生改变,直接使用旧虚拟DOM 若虚拟DOM内容发生改变了,则生成新真实DOM...,随后替换页面之前真实DOM 【旧虚拟DOM】 未找到 与 【新虚拟DOM】相同key 根据数据创建真实DOM,随后渲染到页面 React-Router 4怎样路由变化时重新渲染同一个组件...ReactsetState第二个参数作用是什么? setState 第二个参数是一个可选回调函数。这个回调函数将在组件重新渲染后执行。...React状态提升就是用户对子组件操作,子组件不改变自己状态,通过自己props把这个操作改变数据传递给父组件,改变父组件状态,从而改变受父组件控制所有子组件状态,这也是React单项数据流特性决定...概括来说就是将多个组件需要共享状态提升到它们最近父组件上,父组件上改变这个状态然后通过props分发给子组件。

2.8K20

React核心 -- React-Hooks

大家好,是小丞同学,一名大二前端爱好者 这篇文章是学习 React-Redux 数据共享 学习笔记 非常感谢你阅读,不对地方欢迎指正 愿你忠于自己,热爱生活 hooks...副作用 hooks 给没有生命周期组件,添加结束渲染信号 注意: render 之后执行 hooks 第一个参数接收一个函数,组件更新时候执行 第二个参数接收一个数组,用来表示需要追踪变量...缓存是一个函数,useMemo 缓存是一个值,如果依赖不更新,返回永远是缓存那个函数 给子组件传递 props 时候,如果当前组件不更新,不会触发子组件重新渲染 6. useRef 作用...:长久保存数据 注意事项: 返回一个子元素索引,这个索引整个生命周期中保持不变 对象发生改变时,不通知,属性变更不重新渲染 保存一个值,整个生命周期中维持不变 重新赋值 ref.current 不会触发重新渲染...注意: 上层数据发生改变,肯定会触发重新渲染 我们需要引入 useContext 和 createContext 两个内容 通过 createContext 创建一个 Context 句柄 通过 Provider

1.3K10

React核心 -- React-Hooks

大家好,是小丞同学,一名大二前端爱好者 这篇文章是学习 React-Redux 数据共享 学习笔记 非常感谢你阅读,不对地方欢迎指正 愿你忠于自己,热爱生活 hooks...副作用 hooks 给没有生命周期组件,添加结束渲染信号 注意: render 之后执行 hooks 第一个参数接收一个函数,组件更新时候执行 第二个参数接收一个数组,用来表示需要追踪变量...缓存是一个函数,useMemo 缓存是一个值,如果依赖不更新,返回永远是缓存那个函数 给子组件传递 props 时候,如果当前组件不更新,不会触发子组件重新渲染 6. useRef 作用...:长久保存数据 注意事项: 返回一个子元素索引,这个索引整个生命周期中保持不变 对象发生改变时,不通知,属性变更不重新渲染 保存一个值,整个生命周期中维持不变 重新赋值 ref.current 不会触发重新渲染...注意: 上层数据发生改变,肯定会触发重新渲染 我们需要引入 useContext 和 createContext 两个内容 通过 createContext 创建一个 Context 句柄 通过 Provider

1.2K20

高级前端react面试题总结

componentWillMount方法调用在constructor之后,render之前,在这方法里代码调用setState方法不会触发重新render,所以它一般不会用来作加载数据之用。...componentDidMount方法代码,是组件已经完全挂载到网页上才会调用被执行,所以可以保证数据加载。此外,在这方法调用setState方法,会触发重新渲染。...这里调用更新状态是安全,并不会触发额外render调用。...componentWillReceiveProps初始化render时候不会执行,它会在Component接受到新状态(Props)时被触发,一般用于父组件状态更新时子组件重新渲染。...该函数会在setState设置成功,且组件重新渲染后调用。合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数触发UI更新主要方法。

4K40

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

时候通过用户定义reducer拿到新状态赋值给state,再把外部通过subscribe订阅给触发一下。...拿到setState触发了count改变时候, 由于聊天室组件也利用useContext消费了用于状态管理StoreContext,所以聊天室组件也会被强制重新渲染,这就造成了性能浪费。...缺陷示例 之前写类vuex语法状态管理库react-vuex-hook,就会有这样问题。因为它就是用了Context + useReducer模式。...实现 用最简短方式实现代码,探究react-redux为什么能在count发生改变时候不让使用了message组件重新渲染。...性能章节也提到过,大型应用必须做到只有自己使用状态改变了,才去重新渲染,那么equalityFn就是判断是否渲染关键了。

2.1K20

前端高频react面试题

差异计算算法,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。如果在短时间内频繁setState。...一个组件传入props更新时重新渲染该组件常用方法是componentWillReceiveProps中将新props更新到组件state(这种state被成为派生状态(Derived State...,每次进入页面判断sessionStorage中有没有存储那个值,有,则读取渲染数据;没有,则说明数据是初始化状态。...哪些方法会触发 React 重新渲染重新渲染 render 会做些什么?(1)哪些方法会触发 react 重新渲染?...但是这里有个点值得关注,执行 setState 时候不一定会重新渲染。当 setState 传入 null 时,并不会触发 render。

3.3K20
领券