bunny笔记|React学习-AntDesign组件库(UI)

作者: 一只小小小bunny | 来源:发表于2022-04-12 14:00 被阅读0次

AntDesign

作用：
提供丰富、高质量的组件(开箱即用，使用typescript构建，提供完整的类型定义文件，全链路开发和设计工具体系)
react+antDesign可以理解为 React定制的UI组件库

使用：
安装 npm install antd --save yarn 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-dom yarn 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>
        )
    }
}

bunny笔记|React学习-AntDesign组件库(UI)

AntDesign

React-Router

demo理解Router

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读