在升级 React18 版本时，需要注意一些细节，否则很容易引起线上问题。

先升级 React 相关依赖：

# 基础库升级
pnpm add react@18.2.0 react-dom@18.2.0
# 类型升级
pnpm add @types/react@18.2.20 @types/react-dom@18.2.0 -D

注意：升级 @types/react 版本时，需要关注当前项目中使用的 typescript 版本，找到匹配的 @types/react 版本，具体的对应关系可以通过下面的命令查看：

npm info @types/react

可以在输出结果中找到适配当前项目 typescript 版本的 @types/react 版本，如果确定要升级到指定的 @types/react 版本，也可以反过来调整 typescript 的版本。

import React from 'react'
 
interface ComponentNameProps {
    children?: React.ReactNode
}
 
export default function ComponentName(props: ComponentNameProps) {
    return (
        <>
            {props.children}
        
    )
}

如果在 useEffect 的回调中返回了异步函数，将会触发 react-dom 报错：destroy is not a function。

useEffect(()=>{
  return fetch('https://xxx.com/yyy/zzz')
})

原因：React 会将 useEffect 函数体内部的 return 值作为销毁函数执行，但它必须是一个同步函数。