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

状态更改后,即使我没有改变状态,useReducer操作也不会重新呈现

useReducer是React中的一个Hook,用于管理组件的状态。它接受一个reducer函数和初始状态作为参数,并返回当前状态和一个dispatch函数,用于触发状态的更新。

在React中,组件的状态更新通常会导致组件的重新渲染。但是,当使用useReducer时,即使状态没有改变,useReducer操作也不会重新呈现。这是因为useReducer使用的是浅比较来判断状态是否发生变化,而不是使用引用比较。

浅比较是指比较对象的引用,而不是比较对象的内容。当状态发生变化时,useReducer会返回一个新的状态对象,而不是修改原始状态对象。因此,即使状态的内容没有改变,但由于返回的是一个新的对象,浅比较会认为状态发生了变化,从而触发重新渲染。

这种行为可以提高性能,避免不必要的重新渲染。但同时也需要注意,如果状态的内容发生了变化,但引用没有改变,useReducer操作也不会重新呈现。在这种情况下,可以考虑使用Immer等工具来确保状态的内容发生变化时能够正确触发重新渲染。

总结起来,useReducer操作不会重新呈现的原因是使用了浅比较来判断状态是否发生变化。这种行为可以提高性能,但需要注意状态内容的变化可能不会触发重新渲染。

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

相关·内容

成为一名高级 React 需要具备哪些习惯,他们都习以为常

几年来,每天都在检查初级和中级开发人员编写的React代码,这篇文章涵盖了所看到的最常见的错误。假设你已经知道React的基础知识,因此不会涉及“不要改变道具或状态”这样的陷阱。...在对抗糟糕的渲染性能时,你最强大的武器是React.memo,它只在组件的道具更改时才重新呈现组件。这里的挑战是确保道具不会在每次渲染中改变,在这种情况下React。备忘录不起作用。...喜欢主动使用React.useMemo和useCallback来防止性能问题发生,但是一种反应性的方法——即等待直到发现性能问题才进行优化——可以工作。...最好的前端开发者也是可用性和网页设计方面的专家,即使这并没有反映在他们的工作头衔上。 可用性只是指应用程序使用起来有多容易。例如,添加一个新的待办事项到列表中有多容易?...但是,如果您正在编写的业务应用程序没有这些要求,请只使用客户端呈现。你以后会感谢的。 将样式与组件搭配 应用程序的CSS很快就会变得杂乱无章,没有人能理解。

4.7K40

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

但是有了状态之后,React 函数组件即使在执行可以存储信息。当我们需要一个组件来存储或“记住”某些东西,或者根据环境以不同的方式执行时,状态就是我们所需要的可以让这些生效的东西。...在更新状态后读取状态的正确方法是使用 useEffect hook。它允许我们在每个组件重新渲染(默认情况下)或在我们声明更改的任何特定变量之后执行一个函数。...这意味着这些“中间组件”将在 prop 变更时重新渲染,即使它们没有不同的内容需要渲染。...这些函数就是我们要从组件中 dispatch 去更改状态的函数。 请注意,对这个例子做了一些改变,以显示在谈论 actions 时 payload 的含义。...认为,如果你没有遇到这些问题,真的没有必要增加额外的模板,使你的代码复杂化。即使使用那些几乎不添加样板的现代库。

8.5K20
  • React 设计模式 0x3:Ract Hooks

    当应用程序中存在复杂的状态更改时,可以使用此 Hook,类似于 useState,但是需要发送 action 来更新状态: import React, { useReducer } from "react...如果没有必要进行同步的操作,建议使用 useEffect 来代替,以获得更好的性能和更流畅的用户体验。...这可能会导致不必要的渲染,因为即使没有必要更新组件,子组件重新渲染。这时就可以使用 useCallback 来优化性能。 useCallback 接收两个参数:回调函数和一个依赖项数组。...与 useState 的主要区别在于,useState 的状态更新会触发组件重新渲染,而 useRef 的引用更新不会。...在组件渲染期间,当上下文的值发生更改时,React 将重新渲染组件。

    1.6K10

    「前端架构」使用React进行应用程序状态管理

    将所有应用程序状态都放在一个对象中会导致其他问题,即使没有使用Redux。当一个反应获取一个新值,使用该值的所有组件都将更新并必须呈现即使它是只关心部分数据的函数组件。...我们可以一直提升状态,直到我们的应用程序的顶端。 “当然肯特,好吧,但是道具钻的问题呢?” 好问题。您的第一道防线就是改变构建组件的方式。利用组件组成。...不过,最终,即使是组合不能为您做到这一点,所以您的下一步是跳转到React的Context API中。这实际上是一个“解决方案”,但很长一段时间以来,这个解决方案是“非官方的”。...当您遇到与状态相关的性能问题时,首先要检查的是有多少组件由于状态更改而被重新呈现,并确定这些组件是否真的需要由于状态更改重新呈现。...,而不是在一个大的存储区中,这样对状态的任何部分进行一次更新都不会触发对应用程序中每个组件的更新。

    2.9K30

    React系列-自定义Hooks很简单

    笔者[狗头]认为,暂时应该不会useReducer替代useState,毕竟Redux的写法实在是很繁琐 复杂数据结构场景 刚好最近笔者的项目就碰到了复杂数据结构场景,可是并没有useReducer...知识点合集 引用不变 useReducer返回的state跟ref一样,引用是不变的,不会随着函数组件的重新更新而变化,因此useReducer可以解决闭包陷阱 const setCountReducer...即使祖先使用 React.memo 或 shouldComponentUpdate,❗️会在组件本身使用 useContext 时重新渲染。 举个例子?...可以看到即使props没有变化,一旦组件上层最近的 更新时,该 Hook 会触发重渲染,此时Memo就失效了 Hooks替代Redux 有了useReducer...,我们就这样实现了一个状态管理 缺陷 缺少时间旅行 不支持中间件 性能极差 可以看到上面的结果,一个状态变化,所有组件都重新渲染,嗯嗯?

    2.1K20

    【react】203-十个案例学会 React Hooks

    React Hooks 来打造复杂应用(至少没有),凭借着阅读社区中大量的关于这方面的文章,下面将通过十个案例来帮助你认识理解并可以熟练运用 React Hooks 大部分特性。...useState 保存组件状态 在类组件中,我们使用 this.state 来保存组件状态,并对其修改触发组件重新渲染。...onClick={() =setObject({ ...obj, count: obj.count - 1 })}>- ); } 通过传入 useState 参数返回一个带有默认状态改变状态函数的数组...(代码如上) 似乎有个 useState ,函数组件可以拥有自己的状态了,但仅仅是这样完全不够。...一旦 App 组件的 props 或者状态改变了就会触发重渲染,即使跟 SomeComponent 组件不相关,由于每次 render 都会产生新的 style 和 doSomething,所以会导致

    3.1K20

    React Hook实践指南

    即使其它props的值没有发生变化,它都会使子组件重新渲染,而无用的组件重渲染可能会产生一些性能问题。...useReducer和useState类似,都是用来管理组件状态的,只不过和useState的setState不一样的是,useReducer返回的dispatch函数是用来触发某些改变state的action...debug,因为它对状态改变是封闭的。...或者array state的转换逻辑十分复杂, 需要使用reducer函数来统一管理 组件内多个state互相关联,改变一个状态需要改变另外一个,将他们放在同一个state内使用reducer来统一管理...状态定义在父级组件,不过需要在深层次嵌套的子组件中使用和改变父组件的状态,可以同时使用useReducer和useContext两个hook,将dispatch方法放进context里面来避免组件的props

    2.5K10

    在React项目中全量使用 Hooks

    区别就是这,那么应用场景肯定是从区别中得到的,useLayoutEffect在渲染前执行,也就是说我们如果有状态变了需要依据该状态操作DOM,为了避免状态变化导致组件渲染,然后更新 DOM 后又渲染,...当然这个不只是状态改变,在任何导致组件重新渲染,而且又要改变 DOM的情况下都是 useLayoutEffect的使用场景。...当然这种场景不多,useLayoutEffect 不能多用,且使用时同步操作时长不能过长,不然会给用户带来明显的卡顿。...}, [userInfo]); return ( )}useCallback 会在二个参数的依赖项发生改变重新更新...,如果将此函数传递到子组件时,每次父组件渲染此函数更新,就会导致子组件重新渲染,可以通过传递第二个参数以避免一些非必要性的渲染。

    3K51

    React Hooks 是什么

    在初始渲染的时候,返回的 state 与 initialState 相同,在后续重新渲染时,useState 返回的第一个值将始终是应用更新的最新 state(状态) 。...setState 函数用于更新 state(状态) ,它接受一个新的 state(状态) 值,并将组件排入重新渲染的队列。...通常我们需要在 componentDidMount 和 componentDidUpdate 写一些操作,可能是更新数据,可能是更新 Dom。...前面在的文章 webpack4 新特性 提到了这个内容。 只在顶层调用 Hooks Hooks 只能在顶层调用,不要在循环,条件或嵌套函数中调用 Hook。...使用它来从 DOM 读取布局并同步重新渲染。 在浏览器绘制之前 useLayoutEffect 将同步刷新。 useEffect 中的函数会在 layout(布局) 和 paint(绘制) 触发。

    3.2K20

    React Hooks - 缓存记忆

    如果您的函数组件在相同的Props属性下呈现相同的结果,React将会使用缓存,跳过这次渲染,并重用最后一次渲染的结果。 默认情况下,它将仅对props对象中的复杂对象进行浅层比较。...List的内容没有变化,renderApp和renderList都会被打印输出。...在此示例中,每次count更改时,useCallback将返回新的引用。由于计数在每次渲染期间都会更改,因此useCallback将在每个渲染期间返回新值。所以此代码不会缓存记忆。...useReducer vs useState useReducer更适用于管理包含多个子组件值的状态对象,或者下一个状态取决于前一个值时。...建议的经验法则是,对于只在组件内部使用的数据,主要使用useState;对于需要在父级和子级之间进行双向数据交换,则useReducer是一个更好的选择。

    3.6K10

    React Hook实践总结

    —— Dan Abramov 在React组件中,通过改变状态来触发组件的重新 render,每次渲染都可以理解为一帧。在每一帧中,状态只是一个普通的变量,render的时候,它都是独立不变的。...更新 state 在react中,state或者props的改变,都会触发重新渲染。函数式组件以参数的形式接受props,props变化,整个组件都会重新渲染。...当该 context 的值发生变化时,其下的所有组件都会重新 render. useReducer,是改变 state 的另一种方式。顾名思义,就是 reducer 的 hooks 用法。...reducer 是一个纯函数,也就是说,它不包含任何 UI 和副作用操作。也就是说,只要输入的值不变,其输出的值不会改变。...同样地,reducer 中的数据是 immutable 的,不要直接改变输入的 state,而是应该返回一个新的改变的 state. action 是一个用 type 标识的动作,例如对计数器的 increase

    1.1K20

    useTypescript-React Hooks和TypeScript完全指南

    状态组件称为傻瓜组件,如果一个组件内部没有自身的 state,那么组件就可以称为无状态组件。...我们执行该挂钩,该挂钩返回一个包含当前状态值和一个用于更新状态的函数的数组。状态更新时,它会导致组件的重新 render。...第二个可选参数是一个数组,仅当其中一个值更改时才会 reRender(重新渲染)。如果数组为空,useEffect 将仅在 initial render(初始渲染)时调用。...useMemo 只会在其中一个依赖项发生更改重新计算 memoized 值。此优化有助于避免在每个渲染上进行昂贵的计算。...; useLayoutEffect with TypeScript 与 useEffect Hooks 类似,都是执行副作用操作。但是它是在所有 DOM 更新完成触发。

    8.5K30

    宝啊~来聊聊 9 种 React Hook

    没错,日常应用中也是这样使用的,存在多种复杂状态管理时利用 reducer 函数根据不同 action 去派发状态更新。...在某些场景下我们通常会将函数作为 props 传递到 child component 中去,这样的话,每次父组件 re-render 时即使我们并没有修改当作 props 的函数,子组件重新渲染。...此时其实我们传入子组件的 callback 并没有做什么改变,我们自然期望子组件中的 Effect 不会执行。...而重新分配记忆位置,比方上述我们将 dispatch 作为 props 传入 child component 中时子组件中的 Effect 不会被执行。...此时我们来看看页面的展示效果: 此时即使我们多次点击按钮,子组件的 Effect 不会执行了。 你可以点击这里查看 CodeSanBox。

    1K20

    React Hook | 必 学 的 9 个 钩子

    共享状态数据 useMemo 缓存值 useRef 获取Dom 操作 useCallback 缓存函数 useReducer redux 相似 useImperativeHandle...useMemo 参数: useMemo 返回值是 memoized 值,具有缓存作用 array控制useMemo重新执⾏的数组,array 中 的 state 改变时才会 重新执行useMemo 注意...因为在 useMemo 监听记录的是 count 的值,当 count 值发生变化时,页面上的newValue 在会重新计算,虽然你点击了 5 次 更新 num ,页面没有更新,但是已经缓存起来了,当点击...,从而不会引发一些意料之外的问题,感觉后者才是使用 useCallback 的出发点,而非缓存。...因为你想啊,即使不用 useCallback,假设这个回调函数也没有任何依赖状态直接把这个函数声明在组件外部不可以吗?直接使用 ref 不是更自由吗?

    1.1K20

    React-hooks面试考察知识点汇总

    这使得它适用于许多常见的副作用场景,比如设置订阅和事件处理等情况,因此不应在函数中执行阻塞浏览器更新屏幕的操作。effect 的条件执行默认情况下,effect 会在每轮组件渲染完成执行。...//此时,只有当 props.source 改变才会重新创建订阅。...即使祖先使用 React.memo 或 shouldComponentUpdate,会在组件本身使用 useContext 时重新渲染const themes = { light: { foreground...先编写在没有 useMemo 的情况下可以执行的代码 —— 之后再在你的代码中添加 useMemo,以达到优化性能的目的。...请记住,当 ref 对象内容发生变化时,useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。

    1.3K40

    React-hooks面试考察知识点汇总

    这使得它适用于许多常见的副作用场景,比如设置订阅和事件处理等情况,因此不应在函数中执行阻塞浏览器更新屏幕的操作。effect 的条件执行默认情况下,effect 会在每轮组件渲染完成执行。...//此时,只有当 props.source 改变才会重新创建订阅。...即使祖先使用 React.memo 或 shouldComponentUpdate,会在组件本身使用 useContext 时重新渲染const themes = { light: { foreground...先编写在没有 useMemo 的情况下可以执行的代码 —— 之后再在你的代码中添加 useMemo,以达到优化性能的目的。...请记住,当 ref 对象内容发生变化时,useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。

    2.1K20

    【React】945- 你真的用对 useEffect 了吗?

    在函数组件主体内(这里指在 React 渲染阶段)改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的,因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。...知道useEffect会比较前一次渲染和一次渲染的值,然后就在想,如果所设置的data=[],那么即使一次渲染的data为[],那么[]===[]为false,所以才会造成useEffect...如果你写过redux,那么将会对useReducer非常的熟悉,可以把它理解为一个轻量额redux。useReducer 返回一个状态对象和一个可以改变状态对象的dispatch函数。...dispatch,不会再执行设置状态这个动作。...useEffect 不会在服务端渲染时执行。由于在 DOM 执行完毕才执行,所以能保证拿到状态生效的 DOM 属性。

    9.6K20

    React Hook丨用好这9个钩子,所向披靡

    作用: 获取Dom操作,例如 获取 input 焦点 获取子组件的实例(只有类组件可用) 在函数组件中的一个全局变量,不会因为重复 render 重复申明 栗子 import {useRef} from...useMemo 参数: useMemo 返回值是 memoized 值,具有缓存作用 array控制useMemo重新执⾏的数组,array 中 的 state 改变时才会 重新执行useMemo 注意...因为在 useMemo 监听记录的是 count 的值,当 count 值发生变化时,页面上的newValue 在会重新计算,虽然你点击了 5 次 更新 num ,页面没有更新,但是已经缓存起来了,当点击...,从而不会引发一些意料之外的问题,感觉后者才是使用 useCallback 的出发点,而非缓存。...因为你想啊,即使不用 useCallback,假设这个回调函数也没有任何依赖状态直接把这个函数声明在组件外部不可以吗?直接使用 ref 不是更自由吗?

    2.3K31

    超实用的 React Hooks 常用场景总结

    ,你可以通知 React 跳过对 effect 的调用,只要传递数组作为 useEffect 的第二个可选参数即可:如下所示,如果 count 值两次渲染之间没有发生变化,那么第二次渲染就会跳过 effect...那样一来,这个函数就肯定不会依赖任何 props 或 state,并且不用出现在依赖列表中了;万不得已的情况下,你可以 把函数加入 effect 的依赖但 把它的定义包裹 进 useCallback...,我们基本上都希望在 React 更新 DOM 之后才执行我们的操作。... ); } export default UseReducer; 五、Memo 如下所示,当父组件重新渲染时,子组件重新渲染,即使子组件的 props 和 state 都没有改变...解决: 使用 useMemo 将对象属性包一层,useMemo 有两个参数: 第一个参数是个函数,返回的对象指向同一个引用,不会创建新对象; 第二个参数是个数组,只有数组中的变量改变时,第一个参数的函数才会返回一个新的对象

    4.7K30
    领券