迫于最近收的"徒弟"太懒,觉得 React 难接受,文档也懒得看 ̄□ ̄||
为了抬杠,我录了一个 五分钟上手 React 开发的视频,快速接受 Vite + JSX + React hooks 的开发方式~
一直觉得 React 难以接受的童鞋也终于觉得 OK 了~
链接在这里 https://www.bilibili.com/video/BV1H84y1c7Ym
想要上手 React 开发,又懒得看文档的童鞋可以看看,顺便帮我看看我的技术自媒体之路还有必要走下去不 ̄□ ̄||
录完了这个视频,我怎么觉得 React 也挺渐进式的呢,useState 和 useEffect 足够 CRUD 了,其它用得上的再看也不迟啊!
1
yEhwG10ZJa83067x 2021-05-10 10:52:55 +08:00 1
|
2
zhenrong 2021-05-10 10:52:56 +08:00
你怎么老是在发广告
|
4
shakukansp 2021-05-10 11:35:51 +08:00
useLayoutEffect
之前用 react-spring 的时候必须等 dom 更新完成的时候再进行某些操作的时候用过 里面的回调是 dom 更新之后触发 |
5
005008 OP @shakukansp 操作 DOM 吗
|
6
arashdhostat 2021-05-10 11:51:35 +08:00
useLayoutEffect 和 useEffect 一个在 dom 更新前执行,一个在之后执行
|
7
shakukansp 2021-05-10 11:56:27 +08:00
@005008 react-spring 列表过渡动画,需要操作数据而不渲染过程
|
8
phobal 2021-05-10 12:54:24 +08:00 via iPhone
比如监听浏览器窗口大小发生变化就可以使用 use LayoutEffect
|
9
005008 OP @shakukansp 需要计算数据而不渲染的话更适合用异步吧
|
11
zhwithsweet 2021-05-10 15:49:43 +08:00
掌握一套梭哈能开发就完事了
|
12
KuroNekoFan 2021-05-10 16:17:24 +08:00
你的 effect 依赖于真实的 DOm 改变的话就需要 useLayoutEffect 了...
|
13
005008 OP @zhwithsweet 是这么回事,选任何一套都行
|
14
chionetw5 2021-05-10 16:37:02 +08:00
骗人的,我看了视频 8 分 19 秒
|
16
shakukansp 2021-05-10 17:49:37 +08:00
|
17
LeeReamond 2021-05-10 17:54:01 +08:00 via Android
感谢 lz,不错的入门。一个疑问是,记得以前听说过 react 的绑定不是自动监听的,比如你在 html 里渲染了一个 js 变量,变量改变时它不会自动渲染到视图里,而需要手动设置,但看 lz 的教学似乎不是这样?
|
18
005008 OP @LeeReamond 需要手动设置这一点没有变,class 组件用 setState,hooks 组件用 useState 返回的方法来 “setState”
|
19
LeeReamond 2021-05-10 18:15:02 +08:00 via Android
@005008 我不是很理解这种刷新模式相比于 vue 自动绑定,在什么具体场景下有优势。因为一般来讲 js 更新了那么用户也期望页面被同步渲染,而且看你这种刷新方法,似乎也没法控制粒度,那不是跟 vue 最终效果一样了
|
20
Jirajine 2021-05-10 18:33:06 +08:00 via Android
@LeeReamond 状态改变了当然会自动渲染到视图里,但反过来不行。
react 的核心理念就是 f(state)=ui,数据单向流动。视图改变了不会自动更新状态,必须要手动监听事件变化,用新的状态取代旧的,然后再触发重新渲染,整个过程都是 immutable 的。 |
21
005008 OP @LeeReamond 自动绑定只是一种语法糖哈~后面干的事是一样的
|
23
Livid MOD |