一、项目创建+插件安装
前端项目的创建有三种方式:
参考https://juejin.cn/post/6844903953524588552
- 在html中引入react, react-dom,Babel(使浏览器识别JSX语法)等
- 使用官方脚手架create-react-app创建
- 使用Webpack创建
个人认为第二种方式最简单,目前只介绍第二种方式
创建create-react-app脚手架
yarn global add create-react-app
创建react项目文件
npx create-react-app react-demo
启动后,可以通过3000端口进行访问
//Mac中自定义启动端口 Package.json文件中,将start命令中修改成 “PORT=1234 react-scripts start"
安装react的路由react-router-dom
yarn add react-router-dom —-save-dev
安装发送请求的axios.
yarn add axis
安装状态管理的react-redux
yarn add react-redux
二、设置项目目录结构
Api:接口文件
Components:相关组件文件
router:路由文件
static:静态资源文件
Store:react-redux状态管理文件
utils:各工具类文件
Views:页面视图层文件
三、配置按需加载(打包切片)
其他几种方式可以参考https://blog.csdn.net/qzf_hainenggaima/article/details/103163062
- 目的意义:
单页应用只有一个html,一个主要的css,js 传统打包是全打包成一个文件后引入,用户每次浏览都需要将整个项目都拉下来,因此引入按需加载方式
- 简单高效的配置:
通过webpack的import模块来实现按需加载
首先封装一个 异步加载模块 的组件asyncComponent.js,然后用该组件去引入要加载的模块
//异步加载组件
import React, {Component} from "react";
const asyncComponent = (importComponent) => {
return class extends Component {
constructor(){
super();
this.state = {
component: null
}
}
// 或者可以用async/await
// async componentDidMount(){
// const {default:component} = await importComponent();//解 构
// this.setState({
// component
// });
// }
componentDidMount(){
importComponent().then(cmp=>{
this.setState({
//模块有default输出接口
component:cmp.default
});
})
}
render(){
const Com = this.state.component;
return Com ? <Com {...this.props}/> : null;
}
}
};
export default asyncComponent;
然后在router.js中使用 注意react-router-dom在v6以后的版本中将Switch删除了,代替使用Routes
参考https://stackoverflow.com/questions/69854011/matched-leaf-route-at-location-does-not-have-an-element
import asyncComponent from "../asyncComponent";
import {BrowserRouter, Routes, Route} from 'react-router-dom'
const App = asyncComponent(() => import('../App.js'))
const Login = asyncComponent(() => import('../views/login'))
const Register = asyncComponent(() => import('../views/register.js'))
const BasicRoute = () => (
<BrowserRouter>
<Routes>
<Route path='/' exact element={<App/>}/>
<Route path='/login' exact element={<Login/>}/>
<Route path='/register' exact element={<Register/>}/>
</Routes>
</BrowserRouter>
)
export default BasicRoute;
还有另一种更简洁的方法是使用React.lazy搭配React.Suspense函数直接达到asyncComponnet的效果,还可以优化加载速度
Import React, {Suspense,lazy} from ‘react’;
const App =lazy(() => import('../App.js'))
const Login =lazy(() => import('../views/login'))
const Register =lazy(() => import('../views/register.js’))
const BasicRoute = () => (
<BrowserRouter>
<Suspense fallback={<div>Loding…</div>}>
<Routes>
<Route path='/' exact element={<App/>}/>
<Route path='/login' exact element={<Login/>}/>
<Route path='/register' exact element={<Register/>}/>
</Routes>
</Suspense>
</BrowserRouter>
)
export default BasicRoute;
App.js
import './App.css';
import {Link} from 'react-router-dom';
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
123
<Link to='/login'>login</Link>
<Link to='/register'>register</Link>
</div>
)
}
}
export default App;
login.js
import React from "react”;
export default function Login(){
return(
<div>Login</div>
)
}
最后在src/index.js文件中引入我们的路由文件router.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import BasicRoute from './router/router';
// import store from './store'
ReactDOM.render(
<BasicRoute/>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();
//If you want your app to work offline and load faster,you can change
//unregister() to register() below.Note this.comes with some pitfalls.
//Learn more about service workers:http://bit.ly/CRA_PWA
// serviceWorker.unregister()
路由和路由的按需加载就ok了
执行yarn run build后查看build文件夹,可以看到build/static/js已经实现切片打包了
四、配置react-redux及redux-sagas
- Redux:react为单页面应用,当涉及到大量数据如用户信息时,组件中每次数据传输都很费力,利用redux可以实现将变量统一管理,就像件一个仓库,当每个组件需要数据时,直接通过仓库读取或修改这些数据就行,不用再传过来传过去了
- Redux-saga:redux的一个中间件,主要集中处理react架构中的异步处理工作,也可以不安装,按自己喜好来
安装
yarn add redux -—save //安装redux
yarn add react-redux —save. //安装react的绑定库
yarn add redux-saga //安装sagas
写不完啦,下次分解
参考文章:
https://codeantenna.com/a/Q6CxihpQRP
https://www.1024sou.com/article/504944.html
https://blog.csdn.net/qzf_hainenggaima/article/details/103163062
https://www.jianshu.com/p/324fd1c124ad
https://cloud.tencent.com/developer/article/1680193
https://segmentfault.com/a/1190000010543507
https://www.appblog.cn/2019/06/22/React+Redux%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B/