Next15 异步api的破坏性更新

88 阅读1分钟

文档

image.png

图中提及的一众api现在都会返回一个promise
比较重要的是 params和searchParams 路径参数和查询参数
客户端组件想获取这两个值用useParams和useSearchParams就可以
所以这个改动主要对服务端组件有影响
现在 服务端组件的props里 params和searchParams都是promise了 组件类型上需要改成这种:

image.png
很麻烦 但比较恶心的是 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

会看到这个结果

image.png

可以看到effect只输出了一次 其余输出了两次
啥意思呢?
之前在用react-tracked也有类似的情况 简单来说就是 组件函数执行期间立刻调用了一次useState
不过两者区别还是很大的 next这个完全是毫无区分地进行更新 无差别辐射每个客户端组件
我的评价是乌烟瘴气 没活硬整
文件里明明白白写的use client 瞎了吗 非得传这种props
但凡搞个NextServerComponentProps做一下区分 都不至于搞成这个德行