dev-reading/fe 是一个阅读、导读、速读的 repo,不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具,并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容,找到感兴趣的文章,然后去阅读全文。

本文讨论地址:https://github.com/dev-reading/fe/issues/11

阅读时间大概 1 分钟


过早优化是万恶之源 —— Donald Knuth

本文描述了什么时候开始使用 Redux。作者描述了在构建一个真实 React APP 时,从没有使用 Redux 到使用 Redux 的过程以及收获。

首先,并不是所有的 React 应用程序都需要使用 Redux。事实上,大多数非常简单的 React 应用程序根本不能从 Redux 中受益。

第 1 天

使用 React 本地组件状态

React 使用单向数据流,这意味着父组件把自身的状态作为属性传递给子组件。


第 5 天

随着添加更多的功能,非父子组件之间需要共享一些状态。

我们通过提升状态来解决这个问题。

这意味着我们将状态(和改变这个状态的函数)提升到最接近的祖先(Container Component)。我们将这些函数绑定到容器组件,并将它们作为属性向下传递。这意味着子组件可以触发其父组件中的状态更改,这将更新树中的所有其他组件


第 20 天

随着添加了更多的功能和组件,我们的应用程序状态流程开始看起来像这样...


第 n 天

如果您开始遇到上述某些问题,则可能意味着您应该使用 Redux 了。

Redux

当我们使用 Redux 后,状态变成了这样:


如果您的应用符合以下某些条件,那么我认为应该立即使用 Redux。

  • UI 可以根据应用程序状态显着变化
  • 并不总是以一种线性的,单向的方式流动
  • 许多不相关的组件以相同的方式更新状态
  • 状态树并不简单
  • 状态以许多不同的方式更新
  • 您需要能够撤消以前的用户操作

阅读原文:When do I know I’m ready for Redux?

讨论地址:4 张动图解释为什么(什么时候)使用 Redux #11

如果你想参与讨论,请点击这里

4 张动图解释为什么(什么时候)使用 Redux相关推荐

  1. python打架动态图_20个GIF动图解释令程序员崩溃的瞬间 - 里维斯社

    程序员不是你们眼中的程序猿.程序猿是一种非常特殊的.可以从事程序开发.维护的动物.一般分为程序设计猿和程序编码猿,但两者的界限并不非常清楚,都可以进行开发.维护工作,特别是在中国,而且最重要的一点,二 ...

  2. 17张动图,带你了解不一样的数学

    数学之美 叹为观止 >>>> 之前的推送的文章里,我们发了许多数学动态图! 便有不少模友跟超模君反馈:学数学,就要看动图! 所以今天超模君准备了又17张动图,来满足各位模友欣赏 ...

  3. 秒懂物理计算机出题规划,57张动图, 让你秒懂高中物理原理! 考试次次拿第一

    原标题:57张动图, 让你秒懂高中物理原理! 考试次次拿第一 物理不像语文或者英语,文科的东西记的东西偏多,理解的成分偏少,但物理理解的成分很重,要死记硬背的东西反而很少. 要想把物理学好,先要把简单 ...

  4. bmp180气压传感器工作原理_40张动图看懂各种传感器工作原理

    传感器(英文名称:transducer/sensor)是一种检测装置,能感受到被测量的信息,并能将感受到的信息,按一定规律变换成为电信号或其他所需形式的信息输出,以满足信息的传输.处理.存储.显示.记 ...

  5. 动态拼图怎么做?如何将多张动图拼接在一起?

    当我们想要将多张动态图片拼接在一起,做成带有展示效果的gif拼图的时候,就会去网上寻找拼接动图的方法.但是很多网上下载的拼图软件使用起来非常麻烦.那么,有没有简单的工具呢?下面,小编就为大家分享一款* ...

  6. 怎么把几张图片做成一张动图?

    怎么把几张图片做成一张动图?平时我们在浏览网页的时候,总会在第一时间注意到网页上的一些动态图片,说明动态图片对于人的视觉抓取非常有效,这也是动图使用广泛的原因.很多动图是由一张一张静态图片合并而成,按 ...

  7. 40张动图完美解析各种传感器工作原理

    传感器(英文名称:transducer/sensor)是一种检测装置,能感受到被测量的信息,并能将感受到的信息,按一定规律变换成为电信号或其他所需形式的信息输出,以满足信息的传输.处理.存储.显示.记 ...

  8. 谷歌AI最新3D数据集,1.5万张动图,让AR主宰你的生活

    谷歌AI最新3D数据集,1.5万张动图,让AR主宰你的生活 这是谷歌的开源3D物体数据集Objectron,包含15000份短视频样本,以及从五个大洲.十个国家里收集来的400多万张带注释的图像. 作 ...

  9. 如何将多张动图拼在一起?手把手教你一键快速拼接动图

    相信不少小伙伴在工作或是生活中遇到过需要将多张动图或是多张动图静图拼接在一起的需求吧!对于那些懂PS的人来说再简单不过了,但是对于设计小白来说应该怎么办呢?这时候,大家就可以使用**在线拼接动图**工 ...

最新文章

  1. 在x86上成功使用gentoo系统上安装的grub2启动 Mac OS X Leopard 10.5.7
  2. 中国生物燃料市场产能预测与十四五战略前景展望报告2022年
  3. git clone github_GitHub为什么连接缓慢以及解决方法
  4. bai的字怎么写_硬笔书法的连笔字应该要怎么写?
  5. Python入门进阶篇(六)字典的介绍
  6. (转)Java atomic原子类的使用方法和原理(一)
  7. python中math模块函数_python中math模块函数
  8. Centos 6.2出现Disk sda contains BIOS RAID metadata解决方法
  9. 如何在Mac上创建和使用符号链接?
  10. 弱网环境搭建方案选型
  11. 国内外IGS数据及产品下载网站
  12. 计算机专业小米笔记本推荐,小米笔记本电脑怎么样有哪些型号,哪款性价比高?...
  13. flutter11 - 调试程序
  14. Linux系统:page fault
  15. 【学习笔记】产品经理必备技能之竞品分析(下)用户体验五要素分析法 + 竞品分析报告
  16. 某某客户的一次勒索病毒应急响应
  17. 什么是节点流和处理流?
  18. 关于android的webview打开淘宝天猫链接问题
  19. 自然几何之分形(2)
  20. 蓝湖页面生成html,蓝湖的设计稿变html 好几点

热门文章

  1. 计算机二级web题目(8.3)--简单应用题2
  2. 荣耀v10Android9新功能,荣耀10、荣耀V10开启安卓9.0内测 日常领跑行业
  3. c++ 一维数组长度_每天一点C / 一维数组和指针
  4. Thinking in Java方法签名
  5. 配置phoenix连接hbase_Phoenix视图映射
  6. Azure开发者任务之一:解决Azure Storage Emulator初始化失败
  7. JS将指定的时间戳转为UTC时间
  8. paip.C#.NET多线程访问 toolStripStatusLabel
  9. 谷歌移动应用强调设计元素:向极简风格转型
  10. python使用telnet远程连接linux系统读取信息_Linux服务笔记之一:Telnet 远程登录