React的组件
在 React中，children 属性是一个特殊的属性，它允许你将组件作为其他组件的子元素传递。这意味着你可以在组件内部嵌套任何类型的子组件或元素，并且在父组件中通过 props.children 访问它们。这为组件的复用和组合提供了极大的灵活性。
React中的useState
useState的set操作是异步的，不能立刻取到新值。
React中的useEffect
也叫做 副作用操作：由渲染本身引起的对接组件外部的操作。
useEffect(额外的操作(副作用函数), 依赖项(会影响额外操作的执行))
// 1.没有依赖项 初始渲染时调用 + 组件更新时候执行
// useEffect(()=>{
// console.log('副作用函数执行了');
// })
// 2.依赖性为空数组 初始渲染时调用
// useEffect(() => {
// console.log('副作用函数执行了');
// }, [])
// 3.传入特定依赖项 初始渲染时调用 + 特定依赖项发生变化时执行
useEffect(() => {
console.log('副作用函数执行了');
}, [count])
React配置别名路径
Webpack配置
路径解析配置
需要借助插件craco
npm i -D @craco/craco
// craco.config.js
const path = require('path')
module.exports = {
webpack:{
alias:{
'@': path.resolve(__dirname, 'src')
}
}
}
// package.json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
联想路径配置（输入@的时候有提示）
// jsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
}
}
Vite配置
路径解析配置
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})
安装node类型包
npm i @types/node -D
联想路径配置（输入@的时候有提示）
// tsconfig.app.json
{
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
}
React优化-路由懒加载
使用步骤
- 使用 lazy 方法导入路由组件
- 使用内置的 Suspense 组件渲染路由组件
代码实现 router/index.js
例如下面的代码
import { createBrowserRouter } from 'react-router-dom'
import { lazy, Suspense } from 'react'
import Login from '@/pages/Login'
import Layout from '@/pages/Layout'
import AuthRoute from '@/components/Auth'
// 使用 lazy 方法导入路由组件
const Publish = lazy(() => import('@/pages/Publish'))
const Article = lazy(() => import('@/pages/Article'))
const Home = lazy(() => import('@/pages/Article'))
const router = createBrowserRouter([
{
path: '/',
element: (
<AuthRoute>
<Layout />
</AuthRoute>
),
children: [
{
index: true,
element: (
<Suspense fallback={'加载中'}>
<Home />
</Suspense>
)
},
{
path: 'article',
element: (
// 使用内置的 Suspense 组件渲染路由组件
// fallback就相对于loading，组件未加载完成时显示的内容
<Suspense fallback={'加载中'}>
<Article />
</Suspense>
)
},
{
path: 'publish',
element: (
<Suspense fallback={'加载中'}>
<Publish />
</Suspense>
)
},
],
},
{
path: '/login',
element: <Login />,
},
])
export default router
查看效果 我们可以在打包之后，通过切换路由，监控network面板资源的请求情况，验证是否分隔成功
React优化-打包体积分析
业务背景 通过分析打包体积，才能知道项目中的哪部分内容体积过大，方便知道哪些包如何来优化
使用步骤
- 安装分析打包体积的包：
npm i source-map-explorer - 在 package.json 中的 scripts 标签中，添加分析打包体积的命令
- 对项目打包：
npm run build（如果已经打过包，可省略这一步） - 运行分析命令：
npm run analyze - 通过浏览器打开的页面，分析图表中的包体积
核心代码：
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
}
React优化-配置CDN
分析说明：通过 craco 来修改 webpack 配置，从而实现 CDN 优化 核心代码 craco.config.js
// 添加自定义对于webpack的配置
const path = require('path')
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定：使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src')
},
// 配置webpack
// 配置CDN
configure: (webpackConfig) => {
let cdn = {
js:[]
}
whenProd(() => {
// key: 不参与打包的包(由dependencies依赖项中的key决定)
// value: cdn文件中 挂载于全局的变量名称 为了替换之前在开发环境下
webpackConfig.externals = {
react: 'React',
'react-dom': 'ReactDOM'
}
// 配置现成的cdn资源地址
// 实际开发的时候 用公司自己花钱买的cdn服务器
cdn = {
js: [
'https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js',
]
}
})
// 通过 htmlWebpackPlugin插件 在public/index.html注入cdn资源url
const { isFound, match } = getPlugin(
webpackConfig,
pluginByName('HtmlWebpackPlugin')
)
if (isFound) {
// 找到了HtmlWebpackPlugin的插件
// match.userOptions.files = cdn
match.options.files = cdn
}
return webpackConfig
}
}
}
public/index.html
<body>
<div id="root"></div>
<!-- 加载第三发包的 CDN 链接 -->
<% htmlWebpackPlugin.options.files.js.forEach(cdnURL => { %>
<script src="<%= cdnURL %>"></script>
<% }) %>
</body>
