pnpm i vite vite -D
pnpm i @vitejs/plugin-react -D
pnpm i @babel/core -D
pnpm i @babel/plugin-transform-react-jsx -D
根目录下新建入口文件index.html
vite.config.ts
pnpm create @eslint/config
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
export default defineConfig({
plugins:[
react()
],
resolve: {
alias:{
react: path.posix.resolve('src/packages/react'),
'react-dom': path.posix.resolve('src/packages/react-dom'),
'react-reconciler': path.posix.resolve('src/packages/react-reconciler'),
scheduler: path.posix.resolve('src/packages/scheduler'),
shared: path.posix.resolve('src/packages/shared'),
}
}
})
{
"compilerOptions": {
"target": "ESNext",
"jsx": "react-jsxdev",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"paths": {
"react/*": ["./src/packages/react/*"],
"react-dom/*": ["./src/packages/react-dom/*"],
"react-reconciler/*": ["./src/packages/react-reconciler/*"],
"scheduler/*": ["./src/packages/scheduler/*"],
"shared/*": ["./src/packages/shared/*"],
}
}
}
虚拟DOM转真实DOM。
- 兼容性差,react利用MessageChannel自己实现了一个
- 执行时间不可控 react内部实现了一个,里面把每帧的执行时间定为5ms
- fiber是一个执行单元(原子)
- fiber是一个数据结构 以前,react虚拟DOM生成真实DOM是一气呵成的,不可中断。如果工作时间过长可能引起卡顿。 有了fiber之后,虚拟DOM => fiber => 生成真实DOM 中间多了fiber的过程,因为fiber是一个类链表结构,可以方便的中断和重启