高手问答第 156 期 — 深入浅出 React 和 Redux

局长 发布于 2017/06/06 18:18
阅读 4K+
收藏 19

OSCHINA 本期高手问答(2017 年 6 月 7 日 — 6 月 13 日)我们请来了@程墨Morgan 为大家解答关于 React 和 Redux 方面的问题。

程墨,资深架构师,曾任职于摩托罗拉、雅虎和微软,云鸟配送平台联合创始人,目前服务于美国视频服务公司 Hulu。

互联网技术的发展一日千里,网页应用开发技术的更新甚至可以说是日新月异,自 React 问世以来,大家认识到了一种全新的网页应用开发方式,和 React 一同问世的 Flux,也克服了传统 MVC 框架的很多弊病。技术不断发展,2015 年,Flux 的一个变体 Redux 出现,进一步优化了 Flux 的功能。

React 和 Redux 的结合让大家重新思考了前端网页的构建方式,虽然现在前端领域的“轮子”很多,但多接触不同的开发模式,对于开发者来说也是十分有必要的,这样对技术会有一个更全面的认识,也会带来不一样的开发思路。

为了鼓励踊跃提问,@华章 会在问答结束后从提问者中抽取 5 名幸运会员赠予《深入浅出React和Redux》一书。

购买链接:https://item.jd.com/12073933.html

OSChina 高手问答一贯的风格,不欢迎任何与主题无关的讨论和喷子。

下面欢迎大家就 React 和 Redux 方面的问题向@程墨Morgan (程墨)提问,请直接回帖提问。

加载中
0
华章
华章

OSC 第 156 期高手问答 -- 深入浅出 React 和 Redux(公布中奖名单)

@zabcd117    @放羊   @qqnp1100    @posebear1990    @ceso

恭喜以上五位网友获得《深入浅出React和Redux》一本

请私信@华章 告知快递信息(格式:姓名+电话+地址+邮编)

q
qqnp1100
卧槽,居然中了,人生第一次,可是我现在才看到,来的急吗T.T
程墨Morgan
程墨Morgan
恭喜几位
1
zabcd117
zabcd117

@程墨Morgan 大规模的redux应用,会出现state不好管理的情况,有人提倡所有的state都交给redux来管理,这样保证任何一个状态都是可回归的,还有人让ui component管理自己的state,container component的state通过redux管理,也有人提倡把redux中的state扁平化,即按照类别来划分,而不是和表现层一样的树形结构来划分,这方面您的建议是什么?

还有个问题,就是组件之间的通信(兄弟组件,不同层级的组件),有什么比较好的解决方案么?

谢谢

程墨Morgan
程墨Morgan
没有必要在Redux上按照UI的结构来把state组织成树形结果,因为UI的结构会变,难道每次UI结构边都改Redux上状态结果吗,这肯定不合理对吧。 没有直接父子关系的组件之间通讯,利用props传递肯定不合适,我们肯定不希望两者直接的依赖关系,只能借助第三方的一个中转,使用Rx.js或者Redux或者其他的都行,个人觉得Redux是最容易管理做容易理解的方式。
程墨Morgan
程墨Morgan
并不是所有的state都要交给Redux来管理,如果某种state是临时的(也就是不需要dismount之后再mount还保留原有state),而且不需要其他组件读取的,然后还要写action/reducer比较烦,那就可以放在组件的state上。放在Redux上的state结构,应该尽量扁平而且范式化,我在书中有详细介绍。
1
机器猫123
机器猫123
@程墨Morgan 老师你好,我刚开始接触react。我的问题是,关于react和redux的搭配,项目的目录结构设计有什么要求吗?会按照什么方式来设计目录结构?第二个问题,是实际项目中,对于错误的调式,有什么先进的手法吗?我还没有使用过redux,如何能快速的入手这方面的知识体系?
机器猫123
机器猫123
@程墨Morgan ,谢谢老师的解答,希望能从书中学习到这部分内容。
机器猫123
机器猫123
谢谢老师的解答,希望能看到书中的这部分内容,好好学习一下。
程墨Morgan
程墨Morgan
Redux并不难,内容也不大,代码编译完才2K,只是我也看到很多人误用了Redux,所以才写了这么本书。重要的是实践,只有用上了,才知道哪些需要深入了解。
程墨Morgan
程墨Morgan
对于调试,使用Redux Devtools可以看清楚state的改变和历史,这是使用Redux的一个主要原因:让状态改变清晰可以追溯。
程墨Morgan
程墨Morgan
问得好,如何组织源代码,建议根据功能来组织,也就是说,把满足某个功能的view/action/reducer放在一个目录下,而不是吧所有view放在一个目录下,把所有action放在一个目录下,再把所有reducer放在一个目录下,在书里我有一章专门介绍这种组织方式。
0
飞趣社区创始人
飞趣社区创始人

@程墨Morgan react js和vue。js区别在哪里呢,现在学react。js对以后会有帮助吗

dfghjkukjk
dfghjkukjk
回复 @dfghjkukjk : 78
dfghjkukjk
dfghjkukjk
回复 @程墨Morgan : 4145
程墨Morgan
程墨Morgan
至于学习React是对“以后”有没有帮助?当然有帮助啊。 在这本书的前言部分我就说过,各个框架之间,各有所长,只要自己时间精力允许,就尽量都接触学习一些,即使平时工作只用Vue或者React,了解其他框架如何工作的,对技术的了解也只有好处没有坏处。
程墨Morgan
程墨Morgan
这个问题往上有很多讨论,一搜一大把,这里我只简单讲一下我所理解的区别。 从纯技术角度来说,Vue的形式是模板,也就是在HTML中增加directive实现和数据的绑定;React则抛弃了模板,完全由JavaScript来产生DOM,当然,最后开发者还是写JSX而不是写React.createElement调用,看起来还像是模板,但最后还是转译成了JS表达式。
0
jun4rui
jun4rui

@程墨Morgan React所用的jsx目前除了babel外还有别的更直接或者简单一些的编译方式吗?我总觉得每次构建新项目,就发现似乎Wepack+babel的配置又有点变化了。要是能像typeScript那么简单直接就好了,甚至在IDEA编辑器里面就自动给你转了。

jun4rui
jun4rui
回复 @程墨Morgan : 不错,我找资料研究一下,如果能满足部分需求也好
程墨Morgan
程墨Morgan
呵呵,webpack和babel的配置复杂多变是普遍被批评的方面,不过,babel是标准转译工具,我觉得就算有其他替换工具,也尽量用babel,至少出了问题还有一个成熟社区可以讨论解决。 现在React已经可以用TypeScript来写了。
0
邪恶胖子
邪恶胖子
@程墨Morgan 相对于angular以及vue来说react和redux有什么优势?主要是开发效率和神态方面 将来框架会支持ts开发吗?
邪恶胖子
邪恶胖子
有约束有规范才好,本来前端就够乱的了,还天天出一些幺蛾子。更不得了,js本来语法各种就恶心,需要ts这种大型项目的语言模块化精细化。支持下大佬,了解下react
程墨Morgan
程墨Morgan
React和Redux的生态系统有一个特点,就是强加“约束”,当然,“约束”听起来似乎不是好东西,但实际上,“约束”的存在能让所有开发者写出来的代码天马行空无法维护。这是我看到的React/Redux最大的的特点。 就我所知,一直就可以用TypeScript开发React应用吧。
0
xpbob
xpbob

@程墨Morgan   MVC的问题,他是怎么解决的

程墨Morgan
程墨Morgan
抱歉,这个问题我没大看明白。"MVC的问题”指的什么问题?“他”指的是什么?
0
cmxz
cmxz

@程墨Morgan 用过react,没用过redux,怎样更好的上手redux?

程墨Morgan
程墨Morgan
用好一样东西的方法,就是去亲自实践,了解它的特点,知道什么样的场景下适合用它。 对于Redux,并不是说必须要用,如果你的应用足够简单,完全可以不用,但是如果开发一个大一点的应用,在React之外就需要一个Redux这样的数据管理框架。
0
haitaosoft
haitaosoft

@程墨Morgan 现在的前端就是浏览器的js应用吧,具体框架实在太多、太层出不穷了,它们到底是怎样的关系,有没有一个家谱? 就像:

程墨Morgan
程墨Morgan
回复 @haitaosoft : 很抱歉,我正画不出一个前端框架之间关系图来,不过网上应该有不少框架的对比,应该能够满足你的要求。
haitaosoft
haitaosoft
回复 @程墨Morgan : 家谱只是一种比喻了。此图这么简单就把 它们之间的异同、发展路径 说的很清楚(当然,具体发源地、流行地域 它没有说)。很少佩服,如果 有类似的图介绍 每个框架之间的异同、发展路径,就方便大家选择了。 【每个框架之间也没有什么继承关系,都是独立开发出来的】这个。。。。好像有一些是有 一定的改进、参考 关系吧?
程墨Morgan
程墨Morgan
前端框架之间思想会有共同之处,但是我个人觉得没有什么“前端家谱”可言,因为每个框架之间也没有什么继承关系,都是独立开发出来的。对了,你给的图片中,算不上家谱吧,“关东煮”是日本食物,和我国的火锅完全没有血缘关系。
程墨Morgan
程墨Morgan
怎么定义“前端”,有不同看法,有的认为就是浏览器中的JS,我个人认为前端包含所有展示的逻辑,所以也就包含服务器端产生HTML的部分,比如express,不能否认它也是前端框架吧。
0
idisikx
idisikx

@程墨Morgan react&redux的弹层 dialog怎么设计会比较好? 目前我的做法是根component里放一个listener,通过context暴露api给下层。下层通过调用这个api去设置根component的state从而调用浮层,这种做法好吗?

程墨Morgan
程墨Morgan
回复 @erichua : 如何实现合理,不会导致Store更新引发所有的view都重新渲染,通过实现shouldComponentUpdate可以控制React组件是否重新渲染。如果用上React和Redux,没有理由不用react-redux这个库,这个库自带的shouldComponentUpdate实现应该满足绝大部分要求。
erichua
erichua
回复 @idisikx : 我现在是类似我这个库的实现方式在做,https://github.com/UnPourTous/react-native-stub-toast,我感觉这种反而没必要挂到redux的store上面去
erichua
erichua
@idisikx 回复@idisikx : 有考虑过那个方案,但是觉得在里面对整个store做diff也消耗比较大,现在我的做法是把Dialog的一套单独分离出来,没有融入到redux的sotre里面,因为dialog最外层主要就是控制是否显示。
idisikx
idisikx
回复 @erichua : 你应该是没有实现ShouleComponentUpdate
erichua
erichua
回复 @程墨Morgan : 在redux store上留一个字段来表示dialog是否显示 我之前试过类似的方式,但是发现这样会导致每次显示或者关闭dialog都会重新render整个store对应的view,消耗非常大。
下一页
返回顶部
顶部