图中提及的一众api现在都会返回一个promise
比较重要的是 params和searchParams 路径参数和查询参数
客户端组件想获取这两个值用useParams和useSearchParams就可以
所以这个改动主要对服务端组件有影响
现在 服务端组件的props里 params和searchParams都是promise了 组件类型上需要改成这种:
很麻烦 但比较恶心的是 next并没有提供一个内置类型 用来帮助描述这个props
刚才说到“主要影响的是服务端组件” 其实客户端组件也有影响
打印客户端组件的props
'use client'
import { FC, useEffect } from 'react'
import { useParams, useSearchParams } from 'next/navigation'
const Page: FC<any> = (props) => {
console.log(useSearchParams())
console.log(useParams())
console.log(props)
useEffect(() => {
console.log(1)
}, [])
console.log(2)
return <span>1</span>
}
export default Page
会看到这个结果
可以看到effect只输出了一次 其余输出了两次
啥意思呢?
之前在用react-tracked也有类似的情况 简单来说就是 组件函数执行期间立刻调用了一次useState
不过两者区别还是很大的 next这个完全是毫无区分地进行更新 无差别辐射每个客户端组件
我的评价是乌烟瘴气 没活硬整
文件里明明白白写的use client 瞎了吗 非得传这种props
但凡搞个NextServerComponentProps做一下区分 都不至于搞成这个德行