AntDesign
作用：
提供丰富、高质量的组件(开箱即用，使用typescript构建，提供完整的类型定义文件，全链路开发和设计工具体系)
react+antDesign可以理解为 React定制的UI组件库
使用：
安装npm install antd --saveyarn add antd
引入样式文件
引入UI组件
按需加载
(1)原因
虽然组件成功运行起来了，但实际上加载了全部的antd 组件的样式，会影响前端的性能，借助react-app-rewired进行自定义配置
(2)方法
1)引react-app-rewired并修改package.json里的启动配置yarn add react-app-rewired customize-cra
2)配置package.json文件步骤
3)在项目根目录创建一个config-overrides.js用于修改默认配置
4)安装用于按需加载组件代码和样式的babel插件yan add babel-plugin-import
React-Router
概念：
1)什么是路由?我想去应用的某个页面，通过路由就可以帮助跳转到对应的页面
V4.x版本中：
react-router是浏览器和原生应用的通用部分，
react-router被分为几部分
react-router-dom是用于浏览器的
react-router-native是用于原生应用的
React router v4.x特性
1)路由不再是集中在一个文件，它成了应用布局、UI的一部分;
2)浏览器用的router在react-router-dom里;所以，浏览器里使用的时候只需要importreact-router-dom就可以:
3)增加了BrowerRouter和HashRouter
4)v4的路由默认不再排他，会有多个四配;而v3是默认排他的，只会有一个匹配被使用。
5)不再使用{props.children}来处理嵌套的路由
使用：
安装:我们使用react开发web应用，所以只需要安装react-router-domyarn add react-router-dom
Route组件
通过Route组件可以在需要匹配某个路径的时候绘制一个组件日 <Route exact path="/" component={MainPage) />
常用属性
path属性，字符串类型，它的值就是用来匹配url的
component属性，它的值是一个组件。在path匹配成功之后会绘制这个组件
exact属性，用来指明这个路由是不是排他的匹配
strict属性，用来指明路径只匹配以斜线结尾的路径
....
Link组件
1)Link是reactrouterv4特有的一个组件，是用来代替上一版的anchorlink:
2)使用Link可以在React应用的不同页面之间跳转;
3)与anchorlink会重新加载整个页面不同，Link只会重新加载页面里和当前url可以匹配的部分
BorwserRouter和HashRouter
BrowserRouter:
对Router接口的实现，使得页面和浏览器的history保持一致;如:window.location
HashRouter:
也是对Router接口的实现，只是使用的是ur的hash部分，比如:window.location.hash
区别:
1)如果是非静态站点，要外理各种不同的ur，则需要使用BrowserRouter
2)如果是静态站点，只需要匹配静态url，则使用HashRouter即可
动态路由配置
<Route path="/hot/:hid"component={Hot) />
2)对应动态路由加载的组件里获取传值。 thispropsmatch.params
3)跳转传值
路由重定向
1)引入import {Redirect) from "react-router-dom"
2)定义标记(flag)this.state ={ loginFlag: false}
3)render中判断，决定是否跳转if(this.state.loginFlag){return <Redirect to={{pathname:"/"}}/>
4)执行JS实现跳转 改变状态
demo理解Router
结果展示：
Router.png
router2.png
1)一级路由的使用：
在React APP的src下新建一个components文件夹，新建Home.jsx、Student.jsx、User.jsx
.jsx文件内部代码的基础格式：
import React, {Component} from 'react';
export default class Home extends Component{
constructor(props){
super(props);
this.state={}
}
render(){
return(
<div>首页</div>
)
}
}
import React, {Component} from 'react';
export default class Student extends Component{
constructor(props){
super(props);
this.state = {}
}
render() {
return (
<div className="student">
学生中心
</div>
)
}
}
import React, {Component} from 'react';
import {Route, Link} from "react-router-dom";
export default class User extends Component{
constructor(props){
super(props);
this.state = {}
}
render() {
console.log(this.props.routes);
return (
<div>
个人中心
</div>
)
}
}
2)然后再到app.js中引入
import React, {Component} from 'react';
import './assets/index.css'
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import Home from './components/Home'
import Student from './components/Student'
import User from './components/User'
class App extends Component {
render(){
return(
<Router>
<div>
<header className="title">
//后指定Link的to对应去到的组件模块
<Link to="/">页面主页</Link>
<Link to="/stu">学生中心</Link>
<Link to="/user">个人中心</Link>
</header>
//先Route path componnet引入对应组件模块(只有一个页面要exact排他)
<Router exact path="/" component={Home}>
<Router path="/stu/" component={Student}>
<Router path="/user/" component={User}>
</div>
<Router>
)
}
}
export default App;
优化路由的引入方式(推荐)
import React, {Component} from 'react';
import './assets/index.css'
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import Home from './components/Home'
import Student from './components/Student'
import User from './components/User'
let routes=[
{path="/" component=Home,exact:true},
{path="/stu" component=Student},
{path="/user" component=User}
];
class App extends Component {
render(){
return(
<Router>
<div>
<header className="title">
<Link to="/">页面主页</Link>
<Link to="/stu">学生中心</Link>
<Link to="/user">个人中心</Link>
</header>
{
router.map((route,key)={
if(route.exact){
return <Router key={key} exact path={route.path} component={route.component}/>
}else{
return <Router key={key} path={route.path} component={route.component}/>
}
})
}
</div>
<Router>
)
}
}
export default App;
3)二级路由(User.js为案例)
import React, {Component} from 'react';
import {Route, Link} from "react-router-dom";
export default class User extends Component{
constructor(props){
super(props);
this.state = {}
}
render() {
console.log(this.props.routes);
return (
<div className="user">
<div className="content">
<div className="left">
<Link to="/user/">主面板</Link>
<br/>
<br/>
<Link to="/user/info">用户信息</Link>
</div>
<div className="right">
{/* <Route exact path={`${this.props.match.url}/` component={Main}}/>
<Route exact path={`${this.props.match.url}/Info` component={Info}}/> */}
{
this.props.routes.map((route, key)=>{
return <Route key={key} exact path={route.path} component={route.component} />
})
}
</div>
</div>
</div>
)
}
}
注意：不要忘记引入 import {Route, Link} from "react-router-dom";
4)封装路由。 新建一个routes文件夹，生成index.js文件
import Home from "./../components/Home";
import Student from "./../components/Student";
import User from "./../components/User";
import Info from './../components/User/Info';
import Main from './../components/User/Main';
let routes={
{path:"/",component:Home,exact:true},
{path:"/stu",component:Student},
//含二级路由
{
path:"/user",
component:User,
routes:[
{path:"/user/",component:Main},
{path:"/user/info",component:Info}
]
}
}
export default routes;
在APP.js中引入，并优化App.js代码。
import React, {Component} from 'react';
import './assets/index.css'
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import routes from './routes/index';
class App extends Component {
render() {
return (
<Router>
<div>
<header className="title">
<Link to="/">页面主页</Link>
<Link to="/stu">学生中心</Link>
<Link to="/user">个人中心</Link>
</header>
{
routes.map((route, key)=>{
if(route.exact){
return (
<Route
key={key}
exact
path={route.path}
render={props=>(
<route.component {...props} routes={route.routes}/>
)}
/>)
}else {
return (
<Route
key={key}
path={route.path}
render={props=>(
<route.component {...props} routes={route.routes}/>
)}
/>)
}
})
}
</div>
</Router>
);
}
}
export default App;
components/User/Main.jsx
import React, {Component} from 'react';
export default class Main extends Component{
constructor(props){
super(props);
this.state = {}
}
render() {
return (
<div>
用于展示用户的主要信息
<li>姓名</li>
<li>联系方式</li>
</div>
)
}
}
components/User/Info.jsx
import React, {Component} from 'react';
export default class Info extends Component{
constructor(props){
super(props);
this.state = {}
}
render() {
return (
<div>
<li>姓名</li>
<li>性别</li>
<li>年龄</li>
<li>联系方式</li>
<li>居住地址</li>
<li>兴趣爱好</li>
<li>技能证书</li>
</div>
)
}
}
网友评论