前言

在学习了一段时间react后，打算仿写一个懂车帝移动端项目来训练自己的项目实战能力，也为春招做准备，接下来我将介绍项目中的主干以及我碰到的难点，项目的线上地址以及源码在文章末尾。

成品展示

这是项目各个主页的展示效仓鼠饲养八大禁忌果

项目结构giti

    ├─Data                  // 数据
    |-Public                // koa-static 静态资源库
    index.js
  ├─ src
    ├─api                   // 网路请求代码、工具类函数和相关配置
    ├─assets                // 字体配置及全局样式
    ├─baseUI                // 基础 UI 轮子
    ├─components            // 可复用的 UI 组件
    ├─layouts               // 布局
    ├─pages                 // 页面
    ├─routes                // 路由配置文件
    └─store                 // redux 相关文件
      App.jsx               // 根组件
      main.jsx              // 入口文件

其中在每一个page目录下面，都有一个store文件夹，这是页面的分仓库，在数据管理的时候会将所有分仓库里的数据合并到主仓库，这样可以让每个页面只管理这个page下面的数据。

项目具体部分

路由配置

创建github是干什么的react项目，HTTP使用命令创建项目脚手架

npm init @vitejs/app appName --template react

首先在routes里的index.js里配置路由

......
import React, { lazy, Suspense } from 'react';
const Main = lazy(()=> import('../pages/Main/Main'));
......
const SuspenseComponent = Component => props => {
    return (
        <Suspense fallback={null}>
            <Component {...props}></Component>
        </Suspense>
    )
}
export default [{
    component: BlankLayout,
    routes:[
        {
            path:'/',
            exact: true,
            render: () => < Redirect to = { "/home" }/>,
        },
        {
            path:'/home',
            component: Tabbuttom,
            routes: [
                {
                    path: '/home',
                    exact: true,
                    render: () => < Redirect to = { "/home/main" }
                    />,
                },  
                {
                    path: '/home/server',
                    // 封装SuspenseComponent函数 动态路由， 当切换到对应路由时，才加载对应组件
                    component: SuspenseComponent(Server),
                },
                ......
            ]
        },
        {
                path: '/detail/:id',
                component: SuspenseComponent(Detail),
        }
    ]
}]

在配置路由的过程中使用了辰时是几点到几点lazy＋Suspense优化，所有Component数据库系统是通过懒加载加载gitee进来的，所以渲染页面的时候可能会有延迟，但使用了Suspensgitlabe之后，可优化交互。

使用 rende仓鼠寿命rRouter 渲染下级路由

为了使路由生效，在App.js中需要开启子路由的地方使用 renderRoutes

import React from 'react';
// renderRoutes 读取路由配置转化为 Route 标签
import { renderRoutes } from 'react-router-config';
import { BrowserRouter } from 'react-router-dom';
// 所有组件的外壳组件
function App() {
  return (
     <Provider store={store}>
      <div className="App">
        <BrowserRouter>
          {renderRoutes(routes)}
        </BrowserRouter>
      </div>
    </Provider>
  )
}
export default App;

这里使用的是browser路由，让url里面没有#号，相比较hash路女配每天都在抱大腿我要成仙由美观了不少。

同时在App.js数据库系统概论第五版课后答案中最外层中提供了sto女配满眼都是钱re仓库，使得每一个路由都可以提取到总仓库里面的数据。

完整代码点击这里

接下来就是项目的一级路由

一级路由里面的内容在每个页面都可以看见，所以在一级路由上面写一个Tabhttp协议buttom组件,放在页面的最下面，然后在Tabbuttom里的liGitnk来改变路由，显示不同的组件达到改变页面的效果，在组件里面一定要写{renderRoutes(route.routes)}来渲染要显示的路由。以下是部分核心代码：

......
const Bottom = (props) => {
    ......
    return (
        <>
            {/* fdfdasfafaafdas */}
            {/* 二级路由而准备 */}
            {renderRoutes(route.routes)}
            <ul className="Botton-warper">
                <li
                    onClick={() => { changeIndex(0) }}
                    className="Botton-warper-warp"
                    key="1">
                    <Link to="/home/main"
                        style={{ textDecoration: "none" }}>
                        <div>
                            <div className="icon" style={index === 0 ? { display: "none" } : {}}>
                                <img src={main} alt="" />
                            </div>
                            <div className="icon1" style={index === 0 ? {} : { display: "none" }} >
                                <img src={main} alt="" />
                            </div>
                            <div
                                className="planet">首页</div>
                        </div>
                    </Link>
                </li>
           ......
            </ul>
        </>
    )
}

数据流管理

解决完一级路由之后就可以开始写二级路由里面的组件了，这样项目的大致模样就出来了，但是有一个非常重要的东西还没有搞定，那就是数据流管理，关于数据流的管理，我觉得三元大大的小册里面写的很好，我也是根据三元大大的数据流管理来写这个项目的，[感兴趣的可以去看看这本小册]。(/book/684473…)

在数据流管女配末世养崽日常理数据库原理及应用中，有仓鼠寿命一个总仓库在store中，它可以把所有的分仓库通过redux-http://www.baidu.comthunk合并起来。

store/reducer.js

import thunk from 'redux-thunk';
import { createStore, compose, applyMiddleware, combineReducers } from 'redux';
import reducer from "./reducer";
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
export default store;

s辰时是几点到几点tore/index.js

import { combineReducers } from 'redux';
import { reducer as mainReducer } from '../pages/Main/store/index'
import { reducer as serverReducer } from '../pages/server/store/index'
import { reducer as myReducer } from '../pages/my/store/index'
import { reducer as infoReducer } from '../pages/info/store/index'
export default combineReducers({
    main: mainReducer,
    server: serverReducer,
    my:myReducer,
    info:infoReducer
});

建立女配末世带娃求生好redux仓库之后，女配美炸天在provider包裹的组件里面就要用connect连接起两个仓库，这样才可以使用仓库里的数据。

这是其中一个页面的结构：

统一在indegiti轮胎x.js抛出文件，constants文件用来写dispatch的名字，actionCreators.js来具数据库设计体操作传来的数据，r长生十万年eduhttp://192.168.1.1登录cer.js来具体返回数据。

//reducer.js
import * as actionTypes from './constants';
const defaultstate = {
    maindata: [],
    num: 9,
    index: 0  // tabbar 哪个被激活？ 核心状态
}
const reducer = (state = defaultstate, action) => {
    switch (action.type) {
        case actionTypes.SET_INDEX:
            return {...state, index: action.data}
        case actionTypes.SET_NUM:
            return {...state, num: action.data }
        case actionTypes.CHANGE_MAINDATA:
            return {...state, maindata: action.data }
            // console.log(state,'88888888888888888888');
            return state;
        default:
            return state;
    }
}
export default reducer;

//actionCreators.js
export const getMainData = () => {
    return (dispatch) => {
        reqmain()
            .then((res) => {
                console.log(res);
                dispatch(changeMainData(res.data.data))
            })
            .catch((e) => {
                console.log('出错了');
            })
    }
}

连接到数据库了之后，就可以开始编写页面了，每个页面都是基于这个模板来增加功能的：

import { connect } from 'react-redux'
const Main = (props) => {
    const { getMainDataDispatch } = props
    const { maindata } = props
    return (
        <>
           ....
        </>
    )
}
const mapStateToPorps = (state) => {
    return {
        maindata: state.main.maindata
    }
}
const mapStateToDispatch = (dispatch) => {
    return {
        getMainDataDispatch() {
            dispatch(actionTypes.getMainData())
        }
    }
}
export default connect(mapStateToPorps, mapStateToDispatch)(Main)

移动端适配

使用 postcss-px女配没有求生欲txt宝书网-to-viewport 插件将px自动转为vw的移动端适配方案

npm install postcss-px-to-viewport --save-dev

参数配置 postcss.config.js

 "postcss-px-to-viewport": {
      // options
      unitToConvert: "px", // 需要转换的单位
      viewportWidth: 750, // 设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ["*"], // 能转换的vw属性列表
      viewportUnit: "vw", // 希望使用的视口单位
      fontViewportUnit: "vw", // 字体使用的视口单位
      selectorBlackList: [], // 需要忽略的css选择器
      minPixelValue: 1, // 设置最小的转换数值，如果为1，只有大于1的值才会被转换
      mediaQuery: false, // 媒体查询中是否需要转换单位
      replace: true, // 是否直接更换属性值
      exclude: [],
      landscape: false,
      landscapeUnit: "vw", // 横屏时使用的单位
      landscapeWidth: 568 // 横屏时使用的视口宽度
    }

这样就适配好了，可以尽情使用了。

页面开发

首先这是首页的界面：

由于这是辰时是几点到几点一个移动端项目，所以在页面中间都是有一个scroll组件让页面可以像手机一样向下数据库系统工程师滑动

而这里有三个不同种类的文章，并且文章出现的顺序是随机的，所以这就需要在后台使用mockjs生成陈思思三种不同种类的数据若干，然后再使用map循环出三种不一样的文章。

数据是一次性请求20条，当浏览到最数据库系统工程师后一条数据的时候，这时候再去向后台请求数据，就可以做到一直有数据显示出来，这就需要使用uesEffect来监听page数据，当pagNPMe的数字发生变化的时候，再次向后台请求数据，把文章显示出来。部分核心代码如下：


const Main = (props) => {
    const fetchText1 = () => {
        api.reqlist(page)
            .then(res => {
                settext1([
                    ...text1,
                    ...res.data.data.text1
                ])     
            })
    }
    return (
        <>
            <div className="main">
                <Title />
                <Scroll
                    ref={scrollref}
                    direction={"vertical"}
                    // refresh={false}
                    refresh={true}
                    onScroll={
                        (e) => {
                            forceCheck()
                        }
                    }
                    pullUp={handlePullUp}
                     >
                    <div className="main-padding" >       
                        <SearchInput handleOnclick={() => { handleOnclick() }}
                            searchBoxHandleOnclick={() => history.push('/search')} />
                        <Swipers rotationImg={rotationImg} />
                        <ImgList />
                        <ListData text1={text1} />
                    </div>
                </Scroll>
            </div>
        </>
    )
}

接下来的是车友圈页面：

这里为了实现评论功能，使用了两个库，一个是momont库，用来转化时间，可以在评论之后看到使用者在多久之前评论的，还有一个是由于LokiJS库，LokiJS 是纯 JavaScript 实现的内存数据库，面向文档，所以可以用LokiJS来存储评论。


const Info = (props) => {
  return (
    <>
      <div className="main" onClick={() => { console.log('father') }}>
        <Title />
        <div className="main-padding" >
          <div className="nav">
            {
              infodata.map((item, index) => {
                return (
                  <div className="nav-items" key={item.id} onClick={() => change_id(item.id)}>
                    <div className="items2"></div>
                  </div>
                )
              })
            }
          </div>
        </div>
        <Commonts className='father' commontsindex={commontsindex} id={console.log('commonts的id是', commontsindex)} commonts={commontslist} />
      </div>
    </>
  )
}
export default connect(mapStateToProps, mapStateToDispatch)(Info)

还在优化中……详见此

最后做了一个简易的登录注销界面，这就是用localstorage来存储登录信息，判断是否登录过，当存在登录状态时自动登录，就不详解了。

使用koa构建数据库查询语句后台

在构建仓鼠寿命后台的过程中，把需要的数据库技术数据用json格式传输到index.js中，使用了mockjs来模拟后女配满眼都是钱台数据，koa-cors来解决跨域问题，使用koa-static来传输静态资源。

const Koa = require('koa')
const router = require('koa-router')();
const app = new Koa()
const cors = require('koa2-cors')
const Mock = require('mockjs')
const Random = Mock.Random
app.use(require('koa-static')('./Public'));
// const querystring = require('querystring');
app.use(cors({
    origin: function (ctx) { //设置允许来自指定域名请求
        // if (ctx.url === '/test') {
        return '*'; // 允许来自所有域名请求
        // }
        // return 'http://121.40.130.18:5678'; //只允许http://localhost:8080这个域名的请求
    },
    maxAge: 5, //指定本次预检请求的有效期，单位为秒。
    credentials: true, //是否允许发送Cookie
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], //设置所允许的HTTP请求方法
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'], //设置服务器支持的所有头信息字段
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] //设置获取其他自定义字段
}))
router.get('/home/main', async (ctx) => {
    ctx.response.body = {
        success: true,
        data: MainData
    }
})
router.get('/home/list', async (ctx) => {
    let {
        limit = 40, page = 1
    } = ctx.request.query
    console.log(limit, page, "###");
    console.log(ctx.request.query, "----------------");
    // 根据limit 和page 做数据筛选 
    // 参数   page limit
    let data = Mock.mock({
        'text1|20': [{
            'id': "@increment",
            "title": "@ctitle(15,20)",
            'writer': '@ctitle(3,5)',
            'time': '@time(MM-dd HH:mm)',
            'imgsrc1': '@img(110x80)',
            'imgsrc2': '@img(110x80)',
            'imgsrc3': '@img(110x80)',
            'imgsrc4': '@img(110x120)',
            'type|1': Random.range(1, 4, 1),
        }],
    })
    ctx.body = {
        success: true,
        data
    }
})
    ctx.body = {
        success: true,
        data: data2
    }
})
app
    .use(router.routes())
    .use(router.allowedMethods())
// 1. http服务
// 2. 简单的路由模块
// 3. cors
// 4. 返回数据
app.listen(5678, () => {
    console.log('server is running in port 5678')
})

优化

使用React.me数据库管理系统mogithub是干什么的

组件是构成React视图的一个基本单元。女配美炸天有些组件会有自己本地的状态(state), 当它们的值由于用户的操作而发生改变时，组件就会重新渲染。在一个React应用中，一个组件可能会被频繁地进行渲染。这些渲染虽然有一小部分是必须的，不过大多数github永久回家地址都是无用的，它们的存在会大大降低我们应用的性能。

Reac数据库是什么t.memo会返回一个纯化的组件辰时是几点到几点MemoFuncComponent，这个组件将会在JSX标记中渲染出来。当组件的参数props和状态数据库系统的核心是state发生改变时，React将会检查前一个状态和参数是否和下一个github状态数据库原理及应用和参数是否相同，如果相http代理同，组件将不会被渲染，如果不同，组件将会被重新渲染。

export default React.memo(Main)

图片懒加载

使用rea女配没有求生欲藤萝为枝ct-lazyload 库实现图片懒加载

import Lazyload from 'react-lazyload'
 <Lazyload height={100} placeholder=
 {
    <img width="100%" height="100%"
        src={loading}
    />
}>
   <div className="ListItem-content__img1">
        <img src={item.imgsrc3} alt="" />
   </div>
</Lazyload>

alias

当我们的代码中出现importreact式，webpack会采取向上递归搜索的方法去node_modules目录焯是什么梗下找，为了减少搜索范围我们可以直接告诉webpack去那个路径下面找，也就是别名alias的配置

import * as api from '@/api'

resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }

总结

第一次写完整的r陈思思eact项目，在边写项目的时候先学习，主要还是学习react写项目的过程，学习了怎么动手，也是对自己一段时间的学习总结，逻辑方面主要是用hooks写的，项目也还在不断完善中，欢迎感兴趣的小伙伴来点评指点。

源码

gitee地址
线上地址（移动端项目，记得使用模拟器查看。）

懂你还是得懂车帝🙌（React Hooks实战开发）

前言

成品展示

项目结构giti

项目具体部分

路由配置

数据流管理

移动端适配

页面开发

使用koa构建数据库查询语句后台

优化

使用React.me数据库管理系统mogithub是干什么的

图片懒加载

alias

总结

源码

作者信息

懂你还是得懂车帝🙌（React Hooks实战开发）

前言

成品展示

项目结构giti

项目具体部分

路由配置

数据流管理

移动端适配

页面开发

使用koa构建数据库查询语句后台

优化

使用React.me数据库管理系统mogithub是干什么的

图片懒加载

alias

总结

源码

相关文章

iOS小技能：NSPredicate在正则表达式的应用【下篇】

OpenGL ES 2.0 笔记 #8：View 变换

ssh免登录应该这样配置

Flutter SDK 自带的 10 个最有用的 Widget

作者信息