为什么我的redux状态在页面刷新时返回到初始值？_为什么我的状态在单击按钮时不以redux更新_为什么我的页面在底部导航时不刷新？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一个组件的状态 1.2、为什么要用Redux 在React中，数据在组件中是单向流动的，这是react...的一个特点，单向数据流动，会让开发者阅读代码以及数据流向时更清楚，数据从一个方向父组件流向子组件（通过props）,但是这也伴随着一个问题，两个非父子组件之间通信就相对麻烦，例如A页面用到了B页面产生的数据...而不是直接通知其他组件，组件内部通过订阅 store 中的状态 state 来刷新自己的视图 1.4、Redux是什么？...从React页面渲染来说：页面肯定是先渲染，不会关心dispatch，也不会关心action，只会关心我store里面数据的变化，其实也就是我第一次useEffect的时候，数据取得其实是初始值。...对于这个问题，在我这份代码里面，目前我想到了三个解决方法： 1、定义初始值loading为true，当我们dispatch成功把数据存入的时候，才将loading改为false，写一个加载动画，用这个loading

3.8K3 0

React进阶(1)-理解Redux

),最终把信息返回给用户React Components,实现房子替换的更新虽然文字啰嗦了点:但是Redux就是这么一回事,我要换大房子,房产中介经理听到后,它去记录本里面去查,查到之后,返回到房产中介经理...,然后最终在返回给我,实现房子的替换那么转换为代码理解: 页面上的一个组件,想要获取更新Store中的数据,跟Store说,我点击这个按钮,要更新这个组件的数据,要干什么事情,做的这个具体动作就是...,返回给页面上的组件,实现页面组件的更新大家可以先仔细体会上面这段文字的含义,在后续的实例代码中,在回过头来对比着代码与文字进行理解的,后续还会在拿出来的 Redux的设计基本原则在Redux中有以下几个设计基本原则...,就要改变组件的应用状态,但时改变组件状态的方法不是直接去修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态的组装组件数据的改变只能通过纯函数完成所谓的纯函数,就是指...它是为了描述Action如何改变组件的状态的这也是为什么Redux这个名称比较抽象的原因,其中Reducer类似一个数组中的迭代器函数reduce var arr = [1,2,3,4,5,6] var

1.4K2 2

您找到你想要的搜索结果了吗？

是的

没有找到

React进阶(1)-理解Redux

官方解释:JavaScript应用程序的可预测的状态容器(一个管理应用程序状态的框架）通俗一点:管理组件公共数据状态的容器(仓库/区域) 解决的问题: 当应用组件拥有多个状态,并且组件之间需要共享数据状态时...虽然文字啰嗦了点:但是Redux就是这么一回事,我要换大房子,房产中介经理听到后,它去记录本里面去查,查到之后,返回到房产中介经理,然后最终在返回给我,实现房子的替换那么转换为代码理解: 页面上的一个组件...在Redux中有以下几个设计基本原则单向数据流唯一数据源保持状态只读数据的改变只能通过纯函数reducer来完成单向数据流: 这个其实与props不能直接被修改一样,在父组件向子组件传递数据时是通过属性的方式进行传递的...,就要改变组件的应用状态,但时改变组件状态的方法不是直接去修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态的组装组件数据的改变只能通过纯函数完成所谓的纯函数,就是指...它是为了描述Action如何改变组件的状态的这也是为什么Redux这个名称比较抽象的原因,其中Reducer类似一个数组中的迭代器函数reduce var arr = [1,2,3,4,5,6] var

1.1K2 0

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

如果包含变量的数组为空，则在更新组件时useEffect不会再执行，因为它不会监听任何变量的变更。再看这个例子：业务场景：需要在页面一开始时得到一个接口的返回值，取调用另一个接口。...我的思路是，先设置这个接口的返回值为data=[], 等到数据是再去请求另一个接口，即data作为useEffect的第二个参数传入。但是不知道为什么会造成死循环，拿不到我们想要的结果。... ); } 复制代码上面的例子中，提交表单的时候，会触发页面刷新；就像通常的做法那样，还需要阻止默认事件，来阻止页面的刷新。...在我们的例子中，data，loading和error状态的初始值与useState创建时一致，但它们已经整合到一个由useReducer创建对象，而不是多个useState创建的状态。...useEffect 不会在服务端渲染时执行。由于在 DOM 执行完毕后才执行，所以能保证拿到状态生效后的 DOM 属性。

9.6K2 0

react 同构初步（4）

当前的应用实在太丑了。客户说："我喜欢字体那种冷冷的暖，暖暖的冷。"...状态码支持当请求到一个不匹配的路由/接口，如何优雅地告诉用户404？...为什么是200？此时应该是404才对。...回到NotFound.js，看下它的props，客户端多了一个undefined的staticContext。但是在server端打印的是{}。...user页面做登录支持，当访问user页面时，做301重定向： // container/User.js import {Redirect} from 'react-router-dom'; function

1.8K1 0

fish_redux使用详解---看完就会用！

huangjianke编写：VSCode的Fish Redux模板创建这里我在新建的count文件夹上，选择新建文件，选择：New ---> FishReduxTemplate [image-20200808181242775...的使用计数器 fish_redux正常情况下的流转过程 fish_redux各模块怎么传递数据页面跳转 A ---> B（A跳转到B，并传值给B页面） B ---> A（B返回到A，并返回值给A页面...） state 先写state文件，这边需要定义俩个变量来 fixedMsg：这个是传给下个页面的值 msg：在页面上展示传值得变量 initState方法是初始化变量和接受页面传值的，这边我们给他赋个初始值...效果图 [fish_redux中component] 上图的效果是在页面中嵌入了俩个Component，改变子Component的操作是在页面中完成的先看下页面结构 [image-20200905183821129...，百变星君 view模块中，页面使用widget组合的方式去构造的，只传入必要的数据源和保留一些点击回调 为什么用widget组合方式构造页面？

2.6K4 3

一篇看懂 React Hooks

（没有比 React Hooks 更好的状态共享方案了，约定带来提效，自由的代价就是回到 renderProps or HOC，各团队可以自行评估）。...下面举几个例子：修改页面 title 效果：在组件里调用 useDocumentTitle 函数即可设置页面标题，且切换页面时，页面标题重置为默认标题 “前端精读”。...在销毁时再次给一个默认标题即可，这个简单的函数可以抽象在项目工具函数里，每个页面组件都需要调用。...，网络是否断开效果：在组件调用 useWindowSize 时，可以拿到页面大小，并且在浏览器缩放时自动触发组件更新。...利用 requestAnimationFrame 在给定时间内给出 0-1 之间的值，那每次刷新时，只要判断当前刷新的时间点占总时间的比例是多少，然后做分母，分子是 1 即可。

3.7K2 0

前端经典react面试题及答案_2023-02-28

，在setState前进行判断； Redux实现原理解析 为什么要用redux 在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件（通过props）,所以，两个非父子组件之间通信就相对麻烦...)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图图片 Redux三大原则唯一数据源整个应用的state都被存储到一个状态树里面... 使用，react-router接管了其默认的链接跳转行为，区别于传统的页面跳转，的“跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。...hash)跳转，此时只是链接变了，并没有刷新页面而标签就是普通的超链接了，用于从当前页面跳转到href指向的另一个页面(非锚点情况)。...React.Component：通过设置两个属性propTypes和defaultProps （3）状态的区别 React.createClass：通过getInitialState()方法返回一个包含初始值的对象

1.4K4 0

在React项目中全量使用 Hooks

写过 react-redux 的同学可能发这个 reducer 与 react-redux 中的 reducer 很像，我们借助 react-redux 的思想可以实现一个对象部分更改的 reducer...区别就是这，那么应用场景肯定是从区别中得到的，useLayoutEffect在渲染前执行，也就是说我们如果有状态变了需要依据该状态来操作DOM，为了避免状态变化导致组件渲染，然后更新 DOM 后又渲染，...useRef细心的同学有可能发现我在上面写 useEffect 中有一个 timer 变量，我将其定义在了函数组件外面，这样写简单使用是没问题的，但是如果该组件在同一页面有多个实例，那么组件外部的这个变量将会成共用的...，会带来一个冲突，所以我们需要一个能在函数组件声明周期内部的变量，可以使用 useState 中的 state 但是 state 发生变化组件也会随之刷新，在有些情况是不需要刷新的，只是想单纯的存一个值...但当子组件为 Function 组件时，ref 能拿到什么，总不可能是 function 内定义的方法、变量。

3K5 1

手把手教你全家桶之React(二)

前言上一篇已经讲了一些react的基本配置，本遍接着讲热更新以及react+redux的配置与使用。热更新我们在实际开发时，都有用到热更新，在修改代码后，不用每次都重启服务，而是自动更新。...显然这不是我们要的效果，那么我们平时在项目里为什么会用到react-hot-loader就明了了，因为可以保存状态。...经排查，发现是node版本的问题，我用nvm来作node版本管理工具，从原本的4.7切换到9.0的版本，运行正确。 ? 我们试用了一下redux，对于在项目熟用的童鞋来说，简直是没难度吧。...在action中，我要需要创建三种状态：请求中，请求成功，请求失败。...它的作用是在action到reducer时作中间拦截，让action从函数的形式转为标准的对象形式，给reducer作正确处理。

1.3K3 0

自己手写一个redux，

，我们可以看到，在 head 中已经出现了红色字体的‘我是头部’，在 body 中出现了绿色字体的‘我是body’。...，可是页面并没有刷新，只有在 dispatch 改变数据后,重新调用 renderApp() 才能实现页面的刷新。...dispatch 修改的 body' });这样，我们每次调用 dispatch 时，页面就会重新刷新。...可是，显然这样并不足够，以上的代码仍有些简陋，存在严重的性能问题，虽然我们只是修改了 body 的文案，可是，在页面重新渲染时，head 也被再次渲染。...而在页面刷新时，我们来通过比较 newStore 和 oldStore ，感知需要重新渲染的部分，完成一些性能上的优化。

5393 0

自己手写一个redux

，我们可以看到，在 head 中已经出现了红色字体的‘我是头部’，在 body 中出现了绿色字体的‘我是body’。...，可是页面并没有刷新，只有在 dispatch 改变数据后,重新调用 renderApp() 才能实现页面的刷新。...dispatch 修改的 body' });这样，我们每次调用 dispatch 时，页面就会重新刷新。...可是，显然这样并不足够，以上的代码仍有些简陋，存在严重的性能问题，虽然我们只是修改了 body 的文案，可是，在页面重新渲染时，head 也被再次渲染。...而在页面刷新时，我们来通过比较 newStore 和 oldStore ，感知需要重新渲染的部分，完成一些性能上的优化。

4262 0

Redux 源码解析系列(一) -- Redux的实现思想

本文作者：IMWeb 黄qiong 原文出处：IMWeb社区未经同意，禁止转载 Redux 其实是用来帮我们管理状态的一个框架，它暴露给我们四个接口，分别是： createStore combineReducers...Redux 的源码解析系列开篇之前，先来了解一下它的实现思想。 1、 为什么要有dispatch 假设一种场景下，app里每个组件都需要拿到appState的一部分进行渲染。...到了这一步，每当我想状态发生改变的时候，我就dispatch一个action来改变组件当前的状态。但是这里还有一个问题，就是store里的数据发生改变之后，react是感知不到的。如图： ?...就基本完成啦~ 接着改装下我们的reducer，让它有一个初始值,这样我们的createStore就只需要传入一个reducer即可 // reducer用来管理状态变化 function reducer...reducer 以上就是redux的大致思想。

5531 0

手把手教你全家桶之React(二)

前言上一篇已经讲了一些react的基本配置，本遍接着讲热更新以及react+redux的配置与使用。热更新我们在实际开发时，都有用到热更新，在修改代码后，不用每次都重启服务，而是自动更新。...显然这不是我们要的效果，那么我们平时在项目里为什么会用到react-hot-loader就明了了，因为可以保存状态。...经排查，发现是node版本的问题，我用nvm来作node版本管理工具，从原本的4.7切换到9.0的版本，运行正确。 ? 我们试用了一下redux，对于在项目熟用的童鞋来说，简直是没难度吧。...在action中，我要需要创建三种状态：请求中，请求成功，请求失败。...它的作用是在action到reducer时作中间拦截，让action从函数的形式转为标准的对象形式，给reducer作正确处理。

1.7K8 0

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

为什么？Ajax请求应该写在组件创建期的第五个阶段，即 componentDidMount生命周期方法中。原因如下。在创建期的其他阶段，组件尚未渲染完成。...在 Reducer文件里，对于返回的结果，要注意哪些问题？在 Reducer文件里，对于返回的结果，必须要使用 Object.assign ( )来复制一份新的 state，否则页面不会跟着数据刷新。...为什么它很重要？组件状态数据或者属性数据发生更新的时候，组件会进入存在期，视图会渲染更新。...同时，React 还需要借助 key 来判断元素与本地状态的关联关系。我现在有一个button，要用react在上面绑定点击事件，要怎么做？...React.createClass：通过getInitialState()方法返回一个包含初始值的对象React.Component：通过constructor设置初始状态（4）this区别React.createClass

2K6 0

redux（应用的状态管理器）有那么难吗？没有！

Redux由Flux演变而来，提供几个简单的API来实现状态管理，所谓状态指的是应用数据，所以，Redux本质上是用来管理数据的。...由于Redux对于数据的管理拆分很细，一时间会有很多概念，并且Redux有自己丰富的生态，所以容易眼花缭乱。所以强烈建议从头开始一步一步的来，深入体验并理解Redux的思想，不要步子迈太大。...是不是会在组件或者页面中去发异步请求，然后在回调函数中dispatch(action)更新state。本质上也没太大区别。但是好处却是很明显的。...以及如何重构reducer的代码？可以移步另一篇博客：如何最佳实践的设计reducer。那么，回到最初的话题，引入Redux到我们的应用中，到底有什么好处？我们为什么需要一个专门的状态管理器？...而引入redux之后，我们单纯的面向数据编程即可，我们在Redux中统一的管理数据，然后数据变换会反映到view上，而数据上的交互，本质上也是触发了Redux中的action。

3.3K1 0

字节前端必会react面试题1

)};在集合中添加和删除项目时，不使用键或将索引用作键会导致奇怪的行为。...>等同于forceRefresh 如果为 true，在导航的过程中整个页面将会刷新。...构造函数主要用于两个目的：通过将对象分配给this.state来初始化本地状态将事件处理程序方法绑定到实例上所以，当在React class中需要设置state的初始值或者绑定事件时，需要加上构造函数，...时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...在组件的内部变化 Yes No 设置子组件的初始值 Yes Yes 在子组件的内部更改 No Yes state 和 props

3.2K2 0

如何优化你的超大型React应用

（这也是为什么说单页面应用的SEO不友好的原因，初始它只是一个空的div标签的HTML文件）判断一个页面是不是CSR，很大程度上可以根据右键点开查看页面元素，如果只有一个空的div标签，那么大概率可以说是单页面...，假设我们使用的是dva集中状态管理，同时连接这么多的状态树模块，那么可能会造成状态树模块中任意的数据刷新导致这个组件被刷新，但是其实这个组件此时是不需要刷新的。...非常棒由于纯CSR的网页一般不是很复杂，这里再介绍一个方面，那就是，能不用redux，dva等集中状态管理的状态就不上状态树，实践证明，频繁更新状态树对用户体验来说是影响非常大的。...使用requestAnimationFrame，当页面处于未激活的状态下，该页面的屏幕刷新任务会被系统暂停，由于requestAnimationFrame保持和屏幕刷新同步执行，所以也会被暂停。...一个刷新间隔内函数执行多次时没有意义的，因为显示器每 16.7ms 刷新一次，多次绘制并不会在屏幕上体现出来在高频事件（resize，scroll等）中，使用requestAnimationFrame

2.1K5 0

redux-saga_pub culture

但是，马上了解到了redux-sage，因为大家都在对比两者。本文并不会做对比，在文章的最后会简单介绍为什么选了Saga而不是thunk的原因，仅供参考。...下面是一个简单的例子：在用户提交表单的时候，我们想要做如下事情：校验一些输入信息 (简单，写在组件里) 弹起提示信息（聪明的我，一定要写一个公用的提示信息模块，这样别的页面引入就可以用了，呵呵呵呵...拿到后端返回状态（promise so easy…）隐藏提示信息 (这个有点难度，不过难不倒我，我给组建加一个控制属性) 更新redux store （dispatch咯。。。）...的语法，稍后有介绍) 拿到后端返回状态更新redux store (dispatch一下) 3265839-1e5cf739fe7c1784.jpg redux-saga-01.jpg 可以看到在使用了...比如，我们需要一个刷新按钮，让用户可以手动的从后台刷新数据，当用户不停单机刷新的时候，应该最新一次的请求数据被刷新在页面上，这里可以使用takeLatest。

1.3K1 0

浅谈前端的状态管理（下）

回顾上篇：浅谈前端的状态管理（上） Redux 作为 React 全家桶的一员，Redux 试图为 React 应用提供可预测化的状态管理机制。...尽管在 Redux 里还是没办法做到一切都是确定的（如异步）但是应该保证大多数部分都是确定的包括：视图的渲染是可确定的状态的重建是可确定的至于为什么要这么做，上一篇我已有提及。...他的重要之处在于：便于应用的测试，错误诊断和 Bug 修复。状态管理的目的那其实大多数程序员使用 Redux 的最多的场景无非是从 A 页面返回 B 页面需要保存 B 页面的状态。...如果常规写法返回一个类组件（class KeepAlive extends React.Component），那本质上就是父子组件嵌套，父子组件的生命周期都会按秩序执行，所以每当回到列表页获取状态时，会重复渲染两次...（从 A 页面返回 B 页面需要保存 B 页面的状态），有人的说，你这样还不如用 Redux 或 Mobx 不就好了？

8602 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭