作者:Wang Namelos
链接:https://www.zhihu.com/question/41312576/answer/90782136
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

. React有props和state: props意味着父级分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化。
理解这个是理解React和Redux的前提。
2. 一般构建的React组件内部可能是一个完整的应用,它自己工作良好,你可以通过属性作为API控制它。但是更多的时候发现React根本无法让两个组件互相交流,使用对方的数据。
然后这时候不通过DOM沟通(也就是React体制内)解决的唯一办法就是提升state,将state放到共有的父组件中来管理,再作为props分发回子组件。
3. 子组件改变父组件state的办法只能是通过onClick触发父组件声明好的回调,也就是父组件提前声明好函数或方法作为契约描述自己的state将如何变化,再将它同样作为属性交给子组件使用。
这样就出现了一个模式:数据总是单向从顶层向下分发的,但是只有子组件回调在概念上可以回到state顶层影响数据。这样state一定程度上是响应式的。
4. 为了面临所有可能的扩展问题,最容易想到的办法就是把所有state集中放到所有组件顶层,然后分发给所有组件。
5. 为了有更好的state管理,就需要一个库来作为更专业的顶层state分发给所有React应用,这就是Redux。让我们回来看看重现上面结构的需求:
a. 需要回调通知state (等同于回调参数) -> action
b. 需要根据回调处理 (等同于父级方法) -> reducer
c. 需要state (等同于总状态) -> store
对Redux来说只有这三个要素:
a. action是纯声明式的数据结构,只提供事件的所有要素,不提供逻辑。
b. reducer是一个匹配函数,action的发送是全局的:所有的reducer都可以捕捉到并匹配与自己相关与否,相关就拿走action中的要素进行逻辑处理,修改store中的状态,不相关就不对state做处理原样返回。
c. store负责存储状态并可以被react api回调,发布action.
当然一般不会直接把两个库拿来用,还有一个binding叫react-redux, 提供一个Provider和connect。很多人其实看懂了redux卡在这里。
a. Provider是一个普通组件,可以作为顶层app的分发点,它只需要store属性就可以了。它会将state分发给所有被connect的组件,不管它在哪里,被嵌套多少层。
b. connect是真正的重点,它是一个科里化函数,意思是先接受两个参数(数据绑定mapStateToProps和事件绑定mapDispatchToProps),再接受一个参数(将要绑定的组件本身):
mapStateToProps:构建好Redux系统的时候,它会被自动初始化,但是你的React组件并不知道它的存在,因此你需要分拣出你需要的Redux状态,所以你需要绑定一个函数,它的参数是state,简单返回你关心的几个值。
mapDispatchToProps:声明好的action作为回调,也可以被注入到组件里,就是通过这个函数,它的参数是dispatch,通过redux的辅助方法bindActionCreator绑定所有action以及参数的dispatch,就可以作为属性在组件里面作为函数简单使用了,不需要手动dispatch。这个mapDispatchToProps是可选的,如果不传这个参数redux会简单把dispatch作为属性注入给组件,可以手动当做store.dispatch使用。这也是为什么要科里化的原因。

做好以上流程Redux和React就可以工作了。简单地说就是:
1.顶层分发状态,让React组件被动地渲染。
2.监听事件,事件有权利回到所有状态顶层影响状态。

理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?的更多相关文章

  1. 深入理解React、Redux

    深入理解React.ReduReact+Redux非常精炼,良好运用将发挥出极强劲的生产力.但最大的挑战来自于函数式编程(FP)范式.在工程化过程中,架构(顶层)设计将是一个巨大的挑战.要不然做出来的 ...

  2. 理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?(转)

    作者:Wang Namelos 链接:https://www.zhihu.com/question/41312576/answer/90782136来源:知乎 解答这个问题并不困难:唯一的要求是你熟悉 ...

  3. 通俗易懂的理解 Redux(知乎)

    1. React有props和state: props意味着父级分发下来的属性[父组件的state传递给子组件  子组件使用props获取],state意味着组件内部可以自行管理的状态,并且整个Rea ...

  4. 深入理解React(二) —— 数据流和事件原理

    版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/158 来源:腾云阁 https://www.qclou ...

  5. 深入理解React key

    一 react 组件元素的 diff 算法 二 key 的理解 概述 react 中的key 属性,它是一个特殊的属性,它的出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key ...

  6. 理解 React Hooks 心智模型:必须按顺序、不能在条件语句中调用的规则

    前言 自从 React 推出 hooks 的 API 后,相信大家对新 API 都很喜欢,但是它对你如何使用它会有一些奇怪的限制.比如,React 官网介绍了 Hooks 的这样一个限制: 不要在循环 ...

  7. 移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”

    本系列文章引用了腾讯技术专家樊华恒<海量之道系列文章之弱联网优化>的部分章节,感谢原作者. 1.前言 随着移动互联网的高速发展,移动端IM以移动网络作为物理通信载体早已深入人心,这其中的成 ...

  8. 关于GPL协议的理解(开源与商用、免费与收费的理解)

    编者:请特别注意看暗红色粗体标注的那几句话,总结下来有下面几点: 如果你用了我的 GPL软件,那么你的软件也必须要开源,否则就不能使用我的软件,你是否把你的软件商用和我没关系 Oracle 卖的不是软 ...

  9. react+redux教程(七)自定义redux中间件

    今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...

随机推荐

  1. 转 Django+Bootstrap练习--我的类博客系统开发

    转自: http://blog.sina.com.cn/s/blog_7e050dc80102w312.html 本文记录了一个类博客网站从无到有的搭建过程,同时也是我入门django以及再次入门前端 ...

  2. 删除指定文件夹下所有的.svn文件夹

      sudo find /目录 -name ".svn" -exec rm -r {} \;

  3. 洛谷——P2176 [USACO14FEB]路障Roadblock

    P2176 [USACO14FEB]路障Roadblock 题目描述 每天早晨,FJ从家中穿过农场走到牛棚.农场由 N 块农田组成,农田通过 M 条双向道路连接,每条路有一定长度.FJ 的房子在 1 ...

  4. Codeforces Round #321 (Div. 2) Kefa and Company 二分

    原题链接:http://codeforces.com/contest/580/problem/B 题意: 给你一个集合,集合中的每个元素有两个属性,$m_i,s_i$,让你求个子集合,使得集合中的最大 ...

  5. 使用viewPage实现图片轮播

    概述 图片循环播放这种效果,在许多的场合都能看到,只要一打开各大主流网站的首页几乎都有一个这样的组件,它可以很显目的提供给用户最近最火热的信息.因为它应用得如此之广泛,今天,我们就来写一下这个组件. ...

  6. cocos2d-x step by step(3) Double Kill

    喏,咱们已经调通hello world 了,然后呢,咱们做一些高大上的东西,那做什么呢,做一个打乒乓球的小东西,啊哈! 这就是最终界面了,没画一个球形  就用一个白色方框代替吧. 啊哈! public ...

  7. javascript 判断字符串是否包换字符串

    用"ghiahgiahgia".indexOf("hg"); 返回值>=0为包含,否则就是-1(不包含)

  8. 树状数组求最大值 (RMQ with Shifts)

    代码: #include <iostream> #include <stdio.h> #include <string.h> #include <stdlib ...

  9. 怎样使用oracle 的DBMS_SQLTUNE package 来执行 Sql Tuning Advisor 进行sql 自己主动调优

     怎样使用oracle 的DBMS_SQLTUNE package 来执行 Sql Tuning Advisor 进行sql 自己主动调优 1>.这里简单举个样例来说明DBMS_SQLTUN ...

  10. sonar+Jenkins代码覆盖率检测

    最近公司在搞代码覆盖率检查,简单看了一下结合Jenkins +jacoco + sonar做了一下主要涉及到项目层面和Jenkins层面的东西: 这里只讲一下集成,不讲解sonar的安装Jenkins ...