最近在学习React Client Side Render,需要使用React18。为什么是React18呢,因为React19中引入了大量的Server Side Render的部分,我觉得Server Side Render也会是未来React的主流,但是虽然Server Side Render可能未来成为主流,但是还是有很多功能必须通过client side render实现,比如登录状态,主题偏好的持久化这些功能,所以对于React开发者来说,Client Side Render是必备的技能。
关于Client Side Rendering,Code with Mosh给了一个很好的instructions,如果有实力可以直接购买他的课程(我买了一个月,之后没实力就没买了),如果囊中羞涩可以去B站免费看或者在咸鱼上购买他课程,咸鱼的链接就不给了一搜就有。
Mosh教程中使用的是create vite 4.1.0版本,这个版本有两个out-of-box的功能,很好用,而且我发现这两个功能在create-vite 4.2.0后的版本中没有了(或者需要配置,我没仔细研究过):
node_modules中的文件自动补齐
这里我想引入bootstrap中的某个文件,[email protected]之前的版本支持自动补齐,之后的版本如[email protected]就不支持了,像这样:
我在bootstrap后输入
/
没有任何的补齐提示。
implicit index.ts导入
比如在scr/utils/index.t
有这段代码:
typescript
function printHello() {
console.log('hello')
}
export default printHello
在[email protected]之前的版本,支持在自动导入的时候不用包含index.ts,之后的版本就变成explicit的了。 比如,在main.ts文件中我要import这个printHello
:
自动导入implicit的import
index.ts
中的变量,很酷的功能。而在[email protected]中,自动导入就会加上这个index.ts
,像这样:
可以看到,这里的自动补齐把
index.ts
文件名加上了。
总结
上面这两个功能,我很喜欢,加上我要写React18,所以如果你也要写React18的项目,使用[email protected]创建项目是不错的选择,可以使用下面的命令:
bash
pnpm create [email protected] --template react-ts