从一个PR窥探React未来开发方式
【从一个PR窥探React未来开发方式】大家好,我是卡颂。
都说Hooks
是React
的未来,但Hooks
的最佳实践是什么呢?
关于这块知识,官方文档一点儿都没提及。
所以在实际项目中,常会出现类似下面的问题:
// ...
useEffect(() => {
fetchData(a, b).then(
// ...
)
}, [a, b])
//...
useEffect
依赖了a b
两个状态,当其中任意一个变化后会执行fetchData
请求数据。当应用变得复杂,要追踪
a
、b
何时变化变得越来越难。假以时日接口调整,
fetchData
还需要状态c
作为参数。那么追踪状态变化的难度又会进一步提高。文章图片
最终会导致:
- 轻则无意义的
fetchData
多次调用 - 重则逻辑出现难以追查的
bug
自定义Hook
啊。这只是将问题隐藏的更深了......
文章图片
如何解决这个问题 以上问题的本质原因是:副作用实在太多,可以被当作副作用的东西也实在太多。这导致
useEffect
被滥用。所以,要解决滥用问题,就需要为不同类型副作用提供官方解决方案。
这样,具体问题有了具体解决方案,才不会
useEffect
一把梭。从一个PR看到变化 最近
React
有个很不起眼的PR:文章图片
大体意思是:
在之前,当你在一个已经卸载的组件(
unmounted
)中调用setState
会触发一个warning
,这个PR
将移除这个warning
。举个例子,以下代码在组件
mount
时注册handleChange
:useEffect(() => {
function handleChange() {
setState(store.getState())
}
store.subscribe(handleChange)return () => store.unsubscribe(handleChange)
}, [])
如果你忘记写这行解绑代码:
return () => store.unsubscribe(handleChange)
那么组件卸载后
handleChange
也可能被调用,进而调用setState
。这是潜在的内存泄漏。
在之前的
React
中,这种行为会报warning
。那为什么要移除这种行为下的
warning
呢?文章图片
PR的背后 一方面,这个
warning
有一定概率误判,比如点击按钮提交表单:async function handleSubmit() {
setPending(true)
await post('/someapi')
setPending(false)
}
点击按钮后调用
setPending
触发loading
图标显示,接着发起post
请求。有可能请求返回前组件就卸载了,此时会调用:
setPending(false)
并不会有内存泄漏风险,但是会报
warning
。文章图片
不过
warning
移除还有另一个更本质的原因:在第一个示例中,我们在
useEffect
中调用store.subscribe
,这种行为可以归类为:在组件中订阅外部源什么是外部源呢?
任何变化与否不受React控制的源都是外部源。
比如:
- 各种第三方状态管理库
- 希望
location.hash
变化触发组件更新
useMutableSource
这个Hook
中。文章图片
更多例子 再比如,对于
I/O
操作(比如请求数据)这种大家都会放在useEffect
中的逻辑,未来使用resource
结合Suspense
可能是更好的选择:const resource = fetchDetail();
function Page() {
return (
Loading...}>
);
}function Details() {
const data = https://www.it610.com/article/resource.read();
return {data.name};
}
以上例子中,调用
fetchDetail
会发起数据请求。Details
组件调用resource.read
直接消费数据即可。如果数据还未返回,视图会渲染最近的
Suspense
的fallback
(即Loading...
)。总结 副作用是多种多样的,以前没得选,只能用
useEffect
。随着
React18
的稳定,面对不同副作用场景,会有更明确的解决方案。届时,可能才最终迎来
Hooks
真香的时代......推荐阅读
- 一个人的旅行,三亚
- 一个小故事,我的思考。
- Docker应用:容器间通信与Mariadb数据库主从复制
- 一个人的碎碎念
- 七年之痒之后
- 我从来不做坏事
- 异地恋中,逐渐适应一个人到底意味着什么()
- 迷失的世界(二十七)
- live|live to inspire 一个普通上班族的流水账0723
- 遗憾是生活的常态,但孝顺这件事,我希望每一个人都不留遗憾