react项目实战一项目相关知识储备

最新推荐文章于 2025-04-27 13:41:03 发布

原创最新推荐文章于 2025-04-27 13:41:03 发布 · 置顶 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了React项目的技术栈，包括React、Redux、Express、MongoDB、React-Router4等。重点讲解了es6语法中的let和const、函数、Object扩展及解构赋值，还探讨了express的app和router区别，MongoDB的基本操作，React组件、事件和生命周期，Redux的状态管理，以及React-Redux的Provider和Connect组件。此外，文章还涵盖了React-router4的使用，基于cookie的用户验证，以及axios的拦截器功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

github地址：https://github.com/TH226/react-muke

技术栈

前台

react 负责页面的构建
redux 状态管理
react-redux 关联react与redux
React-router4 路由管理
antd-mobile 蚂蚁金服前端组件
es6

后台

MongoDB 非关系型数据库
express 请求数据

一、es6

1、let和const

let 代替 var 可以修改

const 常量不可修改

2、字符串

模板字符串使用反引号`` 代替 + 拼接字符串

3、函数

箭头函数

…用法

4、Object扩展

5、解构赋值

const srr = ['hello','imooc']
let [arg1,arg2] = arr

//arg1 = 'hello'  arg2 = 'imooc'

二、express

api参考:

http://www.expressjs.com.cn/

app和router区别和使用的场景： app统一管理默认或者相同的路由一般只在app.js中使用就好了 router分别是实现逻辑功能的路由接口而且router实现复杂一些的（比如路由中的参数验证，正则路由等）路由

https://blog.youkuaiyun.com/haochangdi123/article/details/81480212

1、app=express()

app.get、app.post 分别开发get和post接口
app.use 使用模块
代res.send、res.json、res.sendfile相应不同内容

2、 express.Router()

三、mongodb

1、连接

mongoose连接数据库
定义文档模型，schema和model新建模型
定义一个文，类似数据表

2、增删改查

create 新建数据
find、findOne 查找 find查找出来的是列表  findOne只查找一条，查找出来的是对象
update 更新
Remove 删除

四、react

学习参考：

https://react.docschina.org/docs/hello-world.html

1、组件

组件必须export default name  之后才可以被使用

组件属性的传递使用props（由父组件到子组件）

组件内部通过state进行状态管理，修改state通过this.setState修改

渲染列表循环的时候要添加key（key值作为区分，判断是否发生变化）

2、事件

onClick = {this.name}
点击事件的绑定
（1）在初始化函数construct中进行绑定this
this.clickName:this.clickName.bind(this)
(2) 使用箭头函数
在onclick处 onClick = {()=> this.clickName}

3、react生命周期

初始化周期
组件重新渲染周期
组件卸载声明周期

4、常用组件

layout组件
表单组件

五、redux

学习参考：

http://www.redux.org.cn/

我的另一片关于redux的文章

https://blog.youkuaiyun.com/TH226/article/details/83040004

1、redux

redux是状态管理的库
redux是单一状态的，单向数据流
核心概念：store、state、action、reducer

2、主要功能：

store：存储所有的状态
state：状态记录
dispatch：传递改变的信息
action：要执行的改变动作
reducer：处理变化，拿到state和action，生成新的state

1、首先通过reducer新建store，store.getState获取状态
2、需要状态变更，store.dispatch(action)来修改状态
3、Reducer函数接受state和action，返回新的state，可以用store.subscribe监听每次修改

新建一个counter函数（用来判断当前要执行的操作）

export function counter(state=0,action){
    switch(action.type){
        case ADD_GUN:
            return state+1
        case REDUCE_GUN:
            return state-1 
        default:
            return 10
    }
}

新建action，其中有事件的信息

export function addGun(){
    return {type:ADD_GUN}
}

通过reducer新建store

import { createStore } from 'redux'
const store = createStore(counter)

通过store.dispatch(action)执行改变状态

store.dispatch(addGun())

监听状态的改变，并进行渲染

store.subscribe()

六、react-redux

学习参考：

http://www.redux.org.cn/docs/react-redux/
自动关联react与redux

1、Provider

Provider组件应用在组件的最外层，传入store即可，只用一次

2、Connect

Connect 负责从外部获取组件需要的参数

装饰器的方式来写connect

七、React-router4

react-router-dom (withRouter)

可以让普通的组件也有路由组件中可用的方法

入门组件

BrowserRouter 包裹整个应用
Router 路由对应渲染的组件，可嵌套
Link 跳转专用

其他组件

url参数、router组件参数可用冒号标识参数
Redirect组件跳转
switch只渲染一个子Route组件

配合redux

多个reducer需要合并，通过combineReducers()合并

import {combineReducers} from 'redux'

八：基于cookie的用户验证

express以来cookie-parser，

查看cookie来判断是否登陆，进而进行判断是否可以访问

九、axios

学习参考：

https://www.kancloud.cn/yunye/axios/234845

1、拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });