三年经验的 Vue er 终于接受了 React

[005008]

迫于最近收的"徒弟"太懒，觉得 React 难接受，文档也懒得看￣□￣｜｜

为了抬杠，我录了一个 五分钟上手 React 开发的视频，快速接受 Vite + JSX + React hooks 的开发方式~

一直觉得 React 难以接受的童鞋也终于觉得 OK 了~

链接在这里 https://www.bilibili.com/video/BV1H84y1c7Ym

想要上手 React 开发，又懒得看文档的童鞋可以看看，顺便帮我看看我的技术自媒体之路还有必要走下去不￣□￣｜｜

录完了这个视频，我怎么觉得 React 也挺渐进式的呢，useState 和 useEffect 足够 CRUD 了，其它用得上的再看也不迟啊！

有一个 useLayoutEffect API 我已经写过几个业务项目了都没用到，文档说：尽可能使用标准的 useEffect 以避免阻塞视觉更新，我觉得这辈子可能都用不上这个 API...为什么要阻塞视觉更新！有人讲讲吗，我不想思考了...

[yEhwG10ZJa83067x]

/go/promotions

[zhenrong]

你怎么老是在发广告

[005008]

@zhenrong 想编辑一下来不及了

[shakukansp]

useLayoutEffect

之前用 react-spring 的时候必须等 dom 更新完成的时候再进行某些操作的时候用过

里面的回调是 dom 更新之后触发

[005008]

@shakukansp 操作 DOM 吗

[arashdhostat]

useLayoutEffect 和 useEffect 一个在 dom 更新前执行，一个在之后执行

[shakukansp]

@005008 react-spring 列表过渡动画，需要操作数据而不渲染过程

[phobal]

比如监听浏览器窗口大小发生变化就可以使用 use LayoutEffect

[005008]

@shakukansp 需要计算数据而不渲染的话更适合用异步吧

[005008]

@phobal 我好像懂了🙏

[zhwithsweet]

掌握一套梭哈能开发就完事了

[KuroNekoFan]

你的 effect 依赖于真实的 DOm 改变的话就需要 useLayoutEffect 了...

[005008]

@zhwithsweet 是这么回事，选任何一套都行

[chionetw5]

骗人的，我看了视频 8 分 19 秒

[005008]

@chionetw5 四舍五入了

[shakukansp]

@005008 这不是异步不异步的问题，处理副作用需要不渲染 dom

异步操作不写在 useLayoutEffect 里写在 useEffect 里还是会重新渲染的

[LeeReamond]

感谢 lz，不错的入门。一个疑问是，记得以前听说过 react 的绑定不是自动监听的，比如你在 html 里渲染了一个 js 变量，变量改变时它不会自动渲染到视图里，而需要手动设置，但看 lz 的教学似乎不是这样？

[005008]

@LeeReamond 需要手动设置这一点没有变，class 组件用 setState，hooks 组件用 useState 返回的方法来 “setState”

[LeeReamond]

@005008 我不是很理解这种刷新模式相比于 vue 自动绑定，在什么具体场景下有优势。因为一般来讲 js 更新了那么用户也期望页面被同步渲染，而且看你这种刷新方法，似乎也没法控制粒度，那不是跟 vue 最终效果一样了

[Jirajine]

@LeeReamond 状态改变了当然会自动渲染到视图里，但反过来不行。
react 的核心理念就是 f(state)=ui，数据单向流动。视图改变了不会自动更新状态，必须要手动监听事件变化，用新的状态取代旧的，然后再触发重新渲染，整个过程都是 immutable 的。

[005008]

@LeeReamond 自动绑定只是一种语法糖哈~后面干的事是一样的

[Outshine]

@justrand 这个要 @Livid

[Livid]

@justrand
@Outshine

谢谢。这个主题已经被移动。

@005008 请阅读 V2EX 的节点使用说明：

https://www.v2ex.com/help/node

[005008]

@Livid 谢谢~