REDUX :有没有可能刷新页面后我的数据没有被删除？_有没有可能在做完一个动作后，或者在我的例子中，在calender中创建一个事件，然后使用JavaScript自动向下滚动页面？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

自己手写一个redux，

二、dispatch现在看来，在我们面前出现了一个矛盾：我们需要数据共享，但共享数据被任意的修改又会造成不可预期的问题！...，可是页面并没有刷新，只有在 dispatch 改变数据后,重新调用 renderApp() 才能实现页面的刷新。...// 首次渲染renderApp(store);dispatch({ type: 'BODY_TEXT', text: '我是调用 dispatch 修改的 body' }) // 修改数据后，页面并没有自动刷新...renderApp(store); // 重新调用 renderApp 页面刷新这样，显然并不能达到我们的预期，我们并不想在每次改变数据后手动的刷新页面，如果能在改变数据后，自动进行页面的刷新，当然再好不过了...我们又修改了 cearteStore 让他接收 storeChange 返回的新 store ，在 dispatch 修改数据并且页面刷新后，把新 store 赋值给之前的 store 。

5423 0

自己手写一个redux

二、dispatch现在看来，在我们面前出现了一个矛盾：我们需要数据共享，但共享数据被任意的修改又会造成不可预期的问题！...，可是页面并没有刷新，只有在 dispatch 改变数据后,重新调用 renderApp() 才能实现页面的刷新。...// 首次渲染renderApp(store);dispatch({ type: 'BODY_TEXT', text: '我是调用 dispatch 修改的 body' }) // 修改数据后，页面并没有自动刷新...renderApp(store); // 重新调用 renderApp 页面刷新这样，显然并不能达到我们的预期，我们并不想在每次改变数据后手动的刷新页面，如果能在改变数据后，自动进行页面的刷新，当然再好不过了...我们又修改了 cearteStore 让他接收 storeChange 返回的新 store ，在 dispatch 修改数据并且页面刷新后，把新 store 赋值给之前的 store 。

4322 0

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

是的

没有找到

redux-saga_pub culture

在浏览了很多比较文章后，最终，我们选择了redux-saga来处理应用的控制层。...下面是一个简单的例子：在用户提交表单的时候，我们想要做如下事情：校验一些输入信息 (简单，写在组件里) 弹起提示信息（聪明的我，一定要写一个公用的提示信息模块，这样别的页面引入就可以用了，呵呵呵呵...Saga后，react只负责数据如何展示，redux来负责数据的状态和绑定数据到react，而Saga处理了大部分复杂的业务逻辑。...takeLatest在相同的action被触发多次的时候，之前的副作用如果没有执行完，会被取消掉，只有最后一次action触发的副作用可以执行完。...比如，我们需要一个刷新按钮，让用户可以手动的从后台刷新数据，当用户不停单机刷新的时候，应该最新一次的请求数据被刷新在页面上，这里可以使用takeLatest。

1.4K1 0

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

，假设我们使用的是dva集中状态管理，同时连接这么多的状态树模块，那么可能会造成状态树模块中任意的数据刷新导致这个组件被刷新，但是其实这个组件此时是不需要刷新的。...服务端渲染本质，在服务端把代码运行一次，将数据提前请求回来，返回运行后的html文件，客户端接到文件后，拉取js代码，代码注水，然后显示，脱水，js接管页面。...生命周期中发送ajax等获取数据时候，先判断下状态树中有没有数据，如果有数据，那么就不要重复发送请求，导致资源浪费。...也就是说，页面打开时有没有 Service Worker，决定了接下来页面的生命周期内受不受 Service Worker 控制。...所以，只有当页面刷新后，之前不受 Service Worker 控制的页面才有可能被控制起来。直接上代码，存储所有js文件和图片 //实际的存储根据自身需要，并不是越多越好。

2.1K5 0

Hot Reload 究竟是怎么实现的？

一.HMR HMR（Hot Module Replacement）能够对运行时的 JavaScript 模块进行热更新（无需重刷，即可替换、新增、删除模块）（摘自webpack HMR） HMR 特性由...，开发效率上的提升非常有限那么，有没有办法保留运行时的状态数据，只刷新有变化的视图呢？...针对视图的局部刷新免去了整个刷新之后再次回到先前状态所需的繁琐操作，从而真正提升开发效率然而，局部刷新要求对组件（甚至组件的一部分）进行热替换，这在实现上存在不小的挑战（包括如何保障正确性、缩小影响范围...源组件被代理组件包起来了，挂在组件树上的都是代理组件，热更新前后组件类型没有变化（背后的源组件已经被偷摸换成了新的组件实例），因而不会触发额外的生命周期（如componentDidMount）： Proxy...联系我如果心中仍有疑问，请查看原文并留下评论噢。

1.7K2 0

美团前端react面试题汇总

js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么都没有的，就是用户看到的白屏。...Route> 使用，react-router接管了其默认的链接跳转行为，区别于传统的页面跳转，的“跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。...)跳转，此时只是链接变了，并没有刷新页面而标签就是普通的超链接了，用于从当前页面跳转到href指向的另一个页面(非锚点情况)。...，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。...但是在已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？

5.1K3 0

从一个需求来讲前端代码设计

，能保障功能的瞬间可用，只需要在操作中添加一个“删除”按钮，点击按钮发起一次请求，当请求回来后调用一下window.location.reload方法，刷新一下页面即可，这个方案可以在最短的时间能完成功能...，把这个函数传递给添加（Modal）和删除（Modal），当你使用添加（Modal）按下确认之后，会将待添加的信息提交给服务端，服务端响应之后，调用一下这个函数，这个函数又会去获取一次新的列表，来局部刷新页面...删除的逻辑也于此相同，这样的方式比之前的刷新式，要好了许多，唯一不足的是，请求也是需要开销的，也许之后的刷新还是会有一些慢。...在没有使用React或Vue这些框架的情况下，我们依然可以来添加一个小型基础的数据管理器，来完成这个操作。...设计四（使用redux等数据流管理库）目前的前端开发几乎已经无法告别React，Vue等现代JS Web框架，于是我们需要添加一个类似redux的数据流管理库，有了数据流管理库，再配合上React的优化

6972 0

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

因为 Synbol 无法被序列化，所以 React 可以通过有没有 $$typeof 属性来断出当前的 element 对象是从数据库来的还是自己生成的。...)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图图片 Redux三大原则唯一数据源整个应用的state都被存储到一个状态树里面... 使用，react-router接管了其默认的链接跳转行为，区别于传统的页面跳转，的“跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。...hash)跳转，此时只是链接变了，并没有刷新页面而标签就是普通的超链接了，用于从当前页面跳转到href指向的另一个页面(非锚点情况)。...redux 有什么缺点一个组件所需要的数据，必须由父组件传过来，而不能像 flux 中直接从 store 取当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新 render，可能会有效率影响

1.5K4 0

一天梳理完react面试题

react和vue的区别相同点：数据驱动页面，提供响应式的试图组件都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents规范数据流动单向...，就会触发一次额外的渲染，多调用了一次 render 函数，由于它是在浏览器刷新屏幕前执行的，所以用户对此是没有感知的，但是我应当避免这样使用，这样会带来一定的性能问题，尽量是在 constructor...第一个问题答案是会，第二个问题如果是父组件重新渲染时，不管传入的 props 有没有变化，都会引起子组件的重新渲染。那么有没有什么方法解决在这两个场景下不让组件重新渲染进而提升性能呢？...，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。...但是在已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？

5.5K3 0

webpack2 终极优化

: false, compress: { // 在UglifyJs删除没有用到的代码时不输出警告 warnings: false, // 删除所有的 `console...在应用有多个页面的场景下提取出所有页面公共的代码减少单个页面的代码，在不同页面之间切换时所有页面公共的代码之前被加载过而不必重新加载。这个方法可以非常有效的提升应用性能。...比如对于最常见的react体系你可以抽出基础库react react-dom redux react-redux到一个单独的文件而不是和其它文件放在一起打包为一个文件，这样做的好处是只要你不升级他们的版本这个文件永远不会被刷新...以上的配置为： // vender.js 文件抽离基础库到单独的一个文件里防止跟随业务代码被刷新 // 所有页面都依赖的第三方库 // react基础 import 'react'; import 'react-dom...更方便的功能模块热替换模块热替换是指在开发的过程中修改代码后不用刷新页面直接把变化的模块替换到老模块让页面呈现出最新的效果。

5632 0

一次性比较目前前端最流行的状态管理,mobx,vuex,redux-saga使用方式用方式

首先还是要说明一下: 三者都是状态管理库,这三个如果对其中一个深有体会的话,其它两个要再入门就不再难了,我就是在开始的时候只会redux-saga,由于目前工作中使用了mobx,去官网看了一下,也是基本差不多的...,页面刷新....mobx使用方式目前公司用的mobx,当然了在进这家公司之前我是没有听过mobx的,自己也是花了1个星期自学学会的,上代码: import Service from '....在页面中的使用方式: 直接import后,然后调用store里的方法就可以了,so easy!...img有没有变化.

9573 0

webpack2 终极优化

: false, compress: { // 在UglifyJs删除没有用到的代码时不输出警告 warnings: false, // 删除所有的 `console...在应用有多个页面的场景下提取出所有页面公共的代码减少单个页面的代码，在不同页面之间切换时所有页面公共的代码之前被加载过而不必重新加载。这个方法可以非常有效的提升应用性能。...比如对于最常见的react体系你可以抽出基础库react react-dom redux react-redux到一个单独的文件而不是和其它文件放在一起打包为一个文件，这样做的好处是只要你不升级他们的版本这个文件永远不会被刷新...以上的配置为： // vender.js 文件抽离基础库到单独的一个文件里防止跟随业务代码被刷新 // 所有页面都依赖的第三方库 // react基础 import 'react'; import 'react-dom...更方便的功能模块热替换模块热替换是指在开发的过程中修改代码后不用刷新页面直接把变化的模块替换到老模块让页面呈现出最新的效果。

1.1K11 0

Flutter 对状态管理的认知与思考

逗笑了 [img] 关于上面的话，我真不是吹牛皮，我看了几个状态管理的源码后，发现状态管理的思想其实非常朴实，当然开源框架的代码并没有那么简单，基本都做了大量的抽象，方便功能扩展，这基本都会对阅读者产生极大的困扰...，尤其是provider，看的头皮发麻、、、我将几个典型的状态管理的思想提取出来后，用极简的代码复现其运行机制，发现用的都是观察模式的思想，理解了以后，就并不觉得状态管理框架多么的神秘了我绝没有任何轻视的思想...层的吐槽可能是我太菜了，一直感受不到这一层分化的妙处我用fish_redux也写了很多页面（用了一年了），之前也会将相关数据通过Action层传递到Reducer，然后进行相应的刷新，这导致了一个问题...我每次刷新不同行为的数据，就需要创建一个Action 然后在Reducer层解析传过来的数据，再往clone对象里赋值，导致我想修改数据的时候，必须先要去Effect层去看逻辑，然后去Reducer里面修改赋值...被绕了多次，烦躁了多次后，我直接把Reducer层写成了一个刷新方法！

1.1K4 1

React面试八股文（第一期）

，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。...但是在已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？...componentDidUpdate这个函数会在更新后被立即调用，首次渲染不会执行此方法。...万一下次别人要移除它，就得去 mixin 中查找依赖多个 mixin 中可能存在相同命名的函数，同时代码组件中也不能出现相同命名的函数，否则就是重写了，其实我一直觉得命名真的是一件麻烦事。。...雪球效应，虽然我一个组件还是使用着同一个 mixin，但是一个 mixin 会被多个组件使用，可能会存在需求使得 mixin 修改原本的函数或者新增更多的函数，这样可能就会产生一个维护成本HOC 解决了这些问题

3K3 0

【offer 收割计划】你知道为什么 reducer 最好是一个纯函数吗？

，并且不会改变原数组可以看到从索引为 1 的地方截取到索引为 3 的地方结束，返回的是一个被截取的数组，同时原数组没有被改变 splice 方法主要用来删除数组，并且可以添加数组元素，它接收的第一个参数是起始的索引...1 的地方开始（包括 1），开始删除 2 个元素，也就是 b，c ，随后在这里补上了 2 个元素，同时也可以看出原数组 arr 被改变了总结以上：两者并没有什么直接的关联，splice 用来增删数组...== 来进行判断前后的 state 是否相等，这是一种浅比较的方法，我的理解就是地址有没有变化因此如果我们传入的 state 是在旧的基础上更改的，那么它的地址是不会发生变化的，因此是不会通过这层浅比较的...，因此 hasChanged 返回 false ，state 没有被更新那为什么 redux 要这样设计呢？...，不知道看到这里的你有没有什么收获呢？

1K2 0

阿里前端二面常考react面试题（必备）_2023-02-28

> 等同于 forceRefresh 如果为 true，在导航的过程中整个页面将会刷新。...主要解决的问题：单纯的Redux只是一个状态机，是没有UI呈现的，react- redux作用是将Redux的状态机和React的UI呈现绑定在一起，当你dispatch action改变state的时候...最典型的应用场景：当父组件具有overflow: hidden或者z-index的样式设置时，组件有可能被其他元素遮挡，这时就可以考虑要不要使用Portal使组件的挂载脱离父组件。...ajax获取到数据然后使用jquery生成dom结果然后更新到页面当中，但是随着业务发展，我们的项目可能会越来越复杂，我们每次请求到数据，或则数据有更改的时候，我们又需要重新组装一次dom结构，然后更新页面...，这样我们手动同步dom和数据的成本就越来越高，而且频繁的操作dom，也使我我们页面的性能慢慢的降低。

2.8K3 0

react高频面试题总结（附答案）

，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。...但是在已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？...渲染的过程可以被中断，可以将控制权交回浏览器，让位给高优先级的任务，浏览器空闲后再恢复渲染。React中有使用过getDefaultProps吗？它有什么作用？...js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么都没有的，就是用户看到的白屏。...>等同于forceRefresh 如果为 true，在导航的过程中整个页面将会刷新。

2.2K4 0

修复缺陷的正确姿势

（部署之后，有没有机制可以确保SIT是最新版本）或者你可以当QA宣称他找到了一个缺陷时，你可以反问：“你有没有试着重启浏览器/系统？”。...有时候，当听完QA的描述后，如果你和团队里的其他人都表示这个功能点是第一次听说，那么不用慌张，这很可能是一个被遗漏掉的需求。...在实际项目中，应用可能有各种各样的外部依赖，比如：依赖网络请求来获取数据依赖特定的浏览器（可能是旧版本，也可能是特定浏览器）依赖后端服务正常工作所有的后端服务的异常都可能导致前端页面上的非预期行为...当然了，如果你并没有使用React+Redux的组合，很多表单的auto-filler也是可以完成类似动作的。...另一个我经常会使用的实践是：在修复完一个大的缺陷后，你可以和团队分享一下修复的过程，比如如何debug，如何复现，根因分析，如何编写测试等等。

6601 0

前端react面试题总结

，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。...这时就会有全局数据持久化存储的需求。首先想到的就是localStorage，localStorage是没有时间限制的数据存储，可以通过它来实现数据的持久化存储。...但是在已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？...因此handleSubscriptionChange还是会在数据返回成功后被执行，这时候setState由于组件已经被移除，就会导致内存泄漏。...一般用于视图更新前保存一些数据方便视图更新完成后赋值。

2.5K3 0

react结合redux实现一个购物车功能

分析出功能后，我们来模拟后端的数据，因为笔者在这个案例中没有开发后端接口，所以用本地数据模拟后端数据，为了完全模拟后端数据我们在获取数据的时候需要使用setTimout。...http://cn.redux.js.org/docs/basics/Reducers.html 读完发现也没说啥，这里我简单介绍一下reducer，首先我们将store理解成一个容器，这个容器中存放着我们将来要在页面中使用...因为远端获取的数据并不包含数据的选中状态，所以我们要对数据做处理，为每一条数据添加一个checked属性，默认为false，这样数据初始状态就都是未选中状态，并且刷新页面，数据又都变为未选中状态，这里的功能类似手淘的购物车功能...这里需要注意，当我们在修改商品数量的时候，其实是修改了两份数据，一份是store中的数据，一份是远端服务器的数据，这里有同学可能会问，为什么我们不修改完远端数据后，直接发送请求，然后发送异步请求得到新的数据再去渲染呢...有的朋友看完这个案例可能会想到redux完成的todolist案例，这个案例和todolist案例是有一些不同的，不同之处就主要在于商品选中的状态是否随着页面的刷新需要重置。

4.7K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭