尝试了一下 react,直呼最强-react 小书读后感

2021-03-15 00:59:37 +08:00
 miv
最近看一 react 开源项目,看得头大。
里面各种 hooks 满天飞,不过代码倒是整洁。
对于小白看这种项目感觉就是无限套娃,无限封装。
所以没办法,用了几天的时间看了一下 react (之前有接触过,没入门,有 vue 小基础),有几点感受:
0 、react 的 jsx 其实也还好,没有那么难受(对比之前 vue 的那种 teamplate )
1 、hooks 真的轻量,用它好自由,放飞自我
2 、区分聪明组件傻瓜组件代码更舒服,容易复用(还了解到状态提升这种玩意)
3 、高阶组件就是个封装逻辑的,离不开他,其实有必要了解
4 、了解了一下 redux 原理原来是如此好玩,和 vuex 有共通之处
5 、之前 vue 上面那些 mapstate (记不太清名了)原来是这样来的,有一种茅塞顿开的感觉(之前是在 vue 上接触的,直接上手没想太多,时隔多月,没想到在 react 上对他的了解深入了一下)
6 、redux 了解以后,发现 useselect,usedispach 就感觉这些 hooks 香香

最后,感觉很多技术都是共通的,要取长补短,相互借鉴,融会贯通。
5989 次点击
所在节点    React
43 条回复
impl
2021-03-15 12:15:50 +08:00
书的内容不错,要是能继续更新就更好了
stockmaster
2021-03-15 12:56:45 +08:00
Vue 本来就是基于 Angular 和 React 设计出来的,当然共通。
KuroNekoFan
2021-03-15 13:06:15 +08:00
@nannanziyu 你说的这个难道不是应该把查询数据的逻辑作为依赖传递一个函数就好了吗?
huoxingren
2021-03-15 13:15:19 +08:00
墙裂推荐看这个 react hooks 讲解:
https://www.bilibili.com/video/BV1Ge411W7Ra
yamedie
2021-03-15 13:17:57 +08:00
@nannanziyu QQ 新闻+网易新闻 这种场景是我理解的今日热榜爬虫站吗? 两个列表里的属性名命名方式各有不同? 为什么不在数据源头统一成同一种命名方式, 而是放在前端用高阶组件来处理呢?
nannanziyu
2021-03-15 13:18:06 +08:00
@KuroNekoFan
只是简化的场景举例,具体项目具体情形具体分析
比如这三个播放界面(normal, mini, fullPlayer),80%的逻辑是一样的,但是 UI 和具体行为逻辑分别有差别,就是很合适的继承适用场景


nannanziyu
2021-03-15 13:18:48 +08:00
@yamedie
同上,大家要明白举例只是简化的场景,为了表达意思
nannanziyu
2021-03-15 13:25:37 +08:00
yamedie
2021-03-15 13:29:48 +08:00
@nannanziyu 很强, 这是用 electron 开发的? 我用 vue2.x 开发这类"多种形态"组件时, 确实比较难搞, 只能硬着头皮写 3 套样式在一个 SFC 里(比如 simple, thumbnail, detail), 用于切换不同的外观样式. 如果拆成 3 个单独的组件维护起来又会成为噩梦
nannanziyu
2021-03-15 13:35:30 +08:00
@yamedie
是的,electron 的,不过也可以跑在网页里,只不过跑在网页里用的是 html5 的播放组件,跑在 electron 里是 vlc
我是三个都擅长,但是对于复杂逻辑界面,推荐你用 angular,虽然上手难,但是复杂度上来用 angular 控制难度小太多太多
nannanziyu
2021-03-15 17:38:48 +08:00
@murmur
楼上的例子讨论一下呢
magichacker
2021-03-15 22:24:18 +08:00
react-router 的文档写的挺拉胯的
OHyn
2021-03-16 07:00:35 +08:00
react 官方不提供类似 vue 中 keep-alive 的功能,倒腾起来比较麻烦。
nannanziyu
2021-03-16 09:54:14 +08:00
@murmur
你自己 #15 说要讨论,然后就一击脱离……
murmur
2021-03-16 09:55:15 +08:00
@nannanziyu 不好意思,我还在想,昨天回去之后家里没科学,图全是 x
murmur
2021-03-16 10:11:36 +08:00
@nannanziyu 我看了你的例子,首先这是一个播放器,播放器的纯核心都是 pure js,不涉及任何框架

其次,这是一个组合布局的例子啊,音乐列表、播放器按钮、封面专辑图都是一模一样的

就是尺寸有点区别

这就是先组件化然后做了一个布局而已,何谈继承
nannanziyu
2021-03-16 10:38:43 +08:00
@murmur
1, 播放器的纯核心不是 pure js,是 c++
2,所以这三个不同的播放界面,你是按照三个界面来组合吗?
murmur
2021-03-16 10:44:37 +08:00
@nannanziyu 因为核心组件封装的太完整了,只需要把播放列表,按钮、封面、歌词重新组合一下,然后调整下 css 就可以做出来了

这个实在没看出继承的优点,调库属于继承么,调组件属于继承么,应该不算严格的继承吧
nannanziyu
2021-03-16 10:54:59 +08:00
@murmur
算了不跟你说了,讨论不到点上,你没做过复杂的 APP
vertigo
2021-03-16 14:20:36 +08:00
笑死,react 能跟 vue 比

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/761625

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX