这是一个创建于 1380 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近看一 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 香香
最后，感觉很多技术都是共通的，要取长补短，相互借鉴，融会贯通。
里面各种 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 香香
最后，感觉很多技术都是共通的，要取长补短，相互借鉴，融会贯通。
 |
1
miv OP 小白给 react 发帖打 call
|
 |
2
learningman 2021-03-15 01:11:56 +08:00 via Android
这几天在看 react，感觉个人小项目还是 vue 舒服的多
|
 |
3
neoblackcap 2021-03-15 01:13:34 +08:00
没记错的话，hook 就是为了要干掉高阶组件
|
 |
4
FEDT 2021-03-15 01:22:48 +08:00 via iPhone
245 可以深入讲讲吗，写个文章什么的
|
 |
6
ericgui 2021-03-15 01:53:29 +08:00
|
 |
7
murmur 2021-03-15 08:09:12 +08:00
高阶组件是个反前端的设计思路
java 喜欢搞什么连续继承 前端是我要的组件就是最强，如果你不行，我直接换一个行的，谁有闲心接着你的组件写高阶组件啊 |
 |
8
zqx 2021-03-15 08:39:50 +08:00 via Android
高阶组件就是高阶函数+组件，很符合函数式的风格，比如 array.filter.map.reduce 这一套操作下来就得到了你想要的结果，组件也如此
|
 |
9
zhuangzhuang1988 2021-03-15 09:19:25 +08:00 via Android
@murmur ✓，维护时 剧痛哭
|
|
11
murmur 2021-03-15 09:59:09 +08:00  1
@meteor957 前端的组合不是代码的组合，是组件的组合，组件组合出页面，选项控制组件的特性
很大一部分是因为 css 控制了前端最基本的样子，这一部分是和 js 无关的 我希望是 dialog 可以自由显示标题，可以定制按钮，可以控制是不是 modal，可以控制尺寸、边距、初始位置 而不是要 dialog 继承 window 继承 pannel |
 |
13
nannanziyu 2021-03-15 10:24:40 +08:00
@murmur
感觉你没有做过复杂项目 你所说的，对于做个 demo 来说没错 但是对应到具体的项目，每个项目之前各个组件风格都是统一的 比如项目所有的 dialog 风格都是统一的，都是细节部分的区别，所以就有了写一个 common 组件，然后其他派生的需求 |
|
14
miv OP |
|
15
murmur 2021-03-15 10:29:47 +08:00
@nannanziyu
比如项目所有的 dialog 风格都是统一的，都是细节部分的区别 说的没错，这些是 CSS 要解决的问题啊，如果 css 都解决不要，可以说出来讨一下，哪个细节不能用 css 调整，不能用选项控制（这个选项是大众需求，不是为杠而生，比如标题、按钮、关闭的 XX 、最大化最小化这些属于合理需求） |
 |
16
justin2018 2021-03-15 10:32:54 +08:00
|
|
17
miv OP @justin2018 对的
|
|
18
nannanziyu 2021-03-15 10:48:53 +08:00
@murmur
相似组件并不只有样式的区别 比如同样的列表，A 列表和 B 列表样式完全一样，但是一个是 QQ 新闻，一个是网易新闻 那么做一个同样的 common 组件，然后分别继承，override getFeeds 方法就可以了，之后再添加别的平台，也是非常方便 具体项目具体情形具体分析，但是复杂项目中通用组件派生的情况非常普遍而且是最佳实践 |
 |
19
zxCoder 2021-03-15 10:58:47 +08:00
试试 angular
|
 |
20
csdoker 2021-03-15 11:24:44 +08:00
楼主看的啥开源项目呀 我也一直想找个适合小白看的项目 想学习下别人 hooks 的用法
|
 |
21
impl 2021-03-15 12:15:50 +08:00
书的内容不错，要是能继续更新就更好了
|
 |
22
stockmaster 2021-03-15 12:56:45 +08:00
Vue 本来就是基于 Angular 和 React 设计出来的，当然共通。
|
 |
23
KuroNekoFan 2021-03-15 13:06:15 +08:00 via iPhone
@nannanziyu 你说的这个难道不是应该把查询数据的逻辑作为依赖传递一个函数就好了吗？
|
 |
24
huoxingren 2021-03-15 13:15:19 +08:00 1
墙裂推荐看这个 react hooks 讲解：
https://www.bilibili.com/video/BV1Ge411W7Ra |
 |
25
yamedie 2021-03-15 13:17:57 +08:00
@nannanziyu QQ 新闻+网易新闻 这种场景是我理解的今日热榜爬虫站吗? 两个列表里的属性名命名方式各有不同? 为什么不在数据源头统一成同一种命名方式, 而是放在前端用高阶组件来处理呢?
|
|
26
nannanziyu 2021-03-15 13:18:06 +08:00 1
@KuroNekoFan
只是简化的场景举例，具体项目具体情形具体分析 比如这三个播放界面(normal, mini, fullPlayer)，80%的逻辑是一样的，但是 UI 和具体行为逻辑分别有差别，就是很合适的继承适用场景    |
|
27
nannanziyu 2021-03-15 13:18:48 +08:00
@yamedie
同上，大家要明白举例只是简化的场景，为了表达意思 |
|
28
nannanziyu 2021-03-15 13:25:37 +08:00
|
|
29
yamedie 2021-03-15 13:29:48 +08:00
@nannanziyu 很强, 这是用 electron 开发的? 我用 vue2.x 开发这类"多种形态"组件时, 确实比较难搞, 只能硬着头皮写 3 套样式在一个 SFC 里(比如 simple, thumbnail, detail), 用于切换不同的外观样式. 如果拆成 3 个单独的组件维护起来又会成为噩梦
|
|
30
nannanziyu 2021-03-15 13:35:30 +08:00 1
@yamedie
是的，electron 的，不过也可以跑在网页里，只不过跑在网页里用的是 html5 的播放组件，跑在 electron 里是 vlc 我是三个都擅长，但是对于复杂逻辑界面，推荐你用 angular，虽然上手难，但是复杂度上来用 angular 控制难度小太多太多 |
|
31
nannanziyu 2021-03-15 17:38:48 +08:00
@murmur
楼上的例子讨论一下呢 |
 |
32
magichacker 2021-03-15 22:24:18 +08:00
react-router 的文档写的挺拉胯的
|
 |
33
OHyn 2021-03-16 07:00:35 +08:00 via Android 1
react 官方不提供类似 vue 中 keep-alive 的功能，倒腾起来比较麻烦。
|
|
34
nannanziyu 2021-03-16 09:54:14 +08:00
@murmur
你自己 #15 说要讨论，然后就一击脱离…… |
|
35
murmur 2021-03-16 09:55:15 +08:00
@nannanziyu 不好意思，我还在想，昨天回去之后家里没科学，图全是 x
|
|
36
murmur 2021-03-16 10:11:36 +08:00
@nannanziyu 我看了你的例子，首先这是一个播放器，播放器的纯核心都是 pure js，不涉及任何框架
其次，这是一个组合布局的例子啊，音乐列表、播放器按钮、封面专辑图都是一模一样的 就是尺寸有点区别 这就是先组件化然后做了一个布局而已，何谈继承 |
|
37
nannanziyu 2021-03-16 10:38:43 +08:00
|
|
38
murmur 2021-03-16 10:44:37 +08:00
@nannanziyu 因为核心组件封装的太完整了，只需要把播放列表，按钮、封面、歌词重新组合一下，然后调整下 css 就可以做出来了
这个实在没看出继承的优点，调库属于继承么，调组件属于继承么，应该不算严格的继承吧 |
|
39
nannanziyu 2021-03-16 10:54:59 +08:00
@murmur
算了不跟你说了，讨论不到点上，你没做过复杂的 APP |
 |
40
vertigo 2021-03-16 14:20:36 +08:00
笑死,react 能跟 vue 比
|
 |
41
daokedao 2021-03-16 15:57:44 +08:00
redux 现在还是必须吗？
|
 |
42
huijiewei 2021-03-20 19:19:49 +08:00
有了 hook 了。要 redux 干嘛。。。
react hook 真的香 |
 |
43
Aaron01 2023-02-21 02:24:12 +08:00 via Android
react 小书写的真的好
|
Select Language