博客react前端迁移 react compiler方案和后续发展

发布于

前言

最近一段时间内，哈基人白天打工，晚上做毕设相关或者打游戏，博客或者个人开发已经很少更新了，毕竟从早到晚都干相同的事情确实令人苦恼
最近开始将过去的博客前端使用React Compiler进行改造。

根据官方示例所言，其可以避免以下的写法

import { useMemo, useCallback, memo } from 'react';  

const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {  
	const processedData = useMemo(() => {  
	return expensiveProcessing(data);  
		}, [data]);  
	const handleClick = useCallback((item) => {  
		onClick(item.id);  
	}, [onClick]);  
	return (  
		<div>  
			{processedData.map(item => (  
				<Item key={item.id} onClick={() => handleClick(item)} />  
			))}  
		</div>  
	);  
});
  1. 跳过组件的级联重新渲染
    • 重新渲染 <Parent /> 会导致其组件树中的许多组件重新渲染，即使只有 <Parent /> 发生了变化
  2. 跳过 React 外部的昂贵计算
    • 例如，在组件或 Hook 中调用 expensivelyProcessAReallyLargeArrayOfObjects() 这个处理大数据数组的函数

对于本博客的简单用例，最大的好处是可以节省很多开发时的心智负担，变量或函数可以少考虑依赖数组。

改造时

博客使用vite构建工具，对 vite.config.ts和eslint.config.js配置文件进行改造，同时这一过程中还需要更新或安装一些库。
具体的变更可以参考
使用React Compiler · scarletborder/bloggerv2@8e63b5e

小插曲

之前使用了 react + swc ， 但是vite建议使用Rolldown以提升构建性能，正好我之前没有使用任何babel插件或者swc插件，直接无感升级。

Rolldown 集成 | Vite 官方中文文档

另外开启dev服务器时还出现了以下warning

You or a plugin you are using have set optimizeDeps.esbuildOptions but this option is now deprecated. Vite now uses Rolldown to optimize the dependencies. Please use optimizeDeps.rollupOptions instead.

这是因为我起初参考React Compiler官方迁移指南时，使用了Babel插件

import babel from 'vite-plugin-babel';
...
plugins:[
	react(),
	//...
	babel({  
		babelConfig: {  
			plugins: ['babel-plugin-react-compiler'],  
		},  
	}),
]

解决方案是将 Babel 配置直接整合到官方的 React 插件 (@vitejs/plugin-react) 中，而不是使用一个独立的 Babel 插件。这样做更简洁，并且能确保与 Vite 的最新版本兼容。

plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],

后续

全文搜索 useCallback 和 useMemo ， 进行判断和替代
但是我在编写博客前端时，用了大量ahooks的useMemorized()，他只是用来持久化函数，在我的案例中尚未用来根据状态刷新函数，因此保留不做替换。

关于博客的后续发展

博客主要框架已经搭建完成，虽然使用的都是自建组件（AI chat出奇迹），但是目前能够非常好的适配PC和Mobile二者。除了特殊情况，将不考虑修改现有组件。可以肯定的是，Blogroll组件将首先被TDesign的合适组件替代，因为他现在看来确实太丑了hhh

未来的发展方向是首先从theme入手，尝试接入未来的组件库 TDesign， 先使用TDesign的颜色方案，并将现有颜色方案以TDesign建议的方式注入TDesign方案。这里的样式只导入颜色。旧组件和未来的新组件都单向依赖增添的TDesign颜色方案。

深色模式 | TDesign

注入颜色方案后，将优化现有组件的颜色样式，例如翻页组件等。

之后如果有拓展博客显示的需求，将优先考虑使用来自TDesign的组件。这样做，一方面考虑到自建组件的麻烦，另一方面TDesign的组件确实很现代化，与本博客简约的风格契合。

评论区 (0)