2021最新react基础知识大全(包括代理、消息订阅-发布机制、路由、react-redux等知识)

最新推荐文章于 2024-05-14 09:57:48 发布

少年的舟

最新推荐文章于 2024-05-14 09:57:48 发布

阅读量319

点赞数

分类专栏： react 文章标签： react reactjs

本文链接：https://blog.csdn.net/weixin_46113485/article/details/115150291

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.创建项目并启动：

全局安装：npm install -g create-react-app

切换到想创建项目的目录：create-react-app helloReact
最新创建项目方法：npx create-react-app helloReact

静茹项目文件夹：cd helloReact

启动项目：npm start

2.生成唯一的id

2.1 npm i nanoid -S
2.2 import {nanoid} from ‘nanoid’
2.3 nanoid()

3.传入类型
3.1 npm i prop-types -S
3.2 import PropTypes from ‘prop-types’
3.3 static propTypes = {
changeFuc:PropTypes.func.isRequired
}

4.数组统计
const doneCount = todos.reduce((pre,todo)=> pre + (todo.done ?1:0),0)

5.跨域

5.1 一个代理
在package.json中设置：
“proxy”:“http://127.0.0.1:8800”

使用时：
axios.get(‘http://127.0.0.1:3000/rotationChart’).then(res=>{
console.log(res);
})

5.2 多个代理
第一步：在src目录下，新建一个文件为：setupProxy.js
内容是：
const proxy = require(‘http-proxy-middleware’)

module.exports = function(app){
app.use(
proxy(’/api1’,{//遇见api1前缀的请求，就会触发该代理配置
target:‘http://127.0.0.1:8800’, //请求转发给谁
changeOrigin:true, //控制服务器收到的响应头host字段的值
pathRewrite:{’^api1’:’’} //重写请求路径（必须）
}),
proxy(’/api2’,{//遇见api1前缀的请求，就会触发该代理配置
target:‘http://127.0.0.1:8809’, //请求转发给谁
changeOrigin:true, //控制服务器收到的响应头host字段的值
pathRewrite:{’^api2’:’’}
}),
)
}

第二步：使用：
axios.get(‘http://localhost:3000/api1/haha’).then(res=>{
console.log(res);
})

6.消息订阅-发布机制
6.1 工具库：PubSubJS
6.2 下载：npm install pubsub-js --save
6.3 使用
1> import PubSub from ‘pubsub-js’
2>PubSub.subscribe(‘delete’,function(data){}) 订阅 [
// 订阅
this.token = PubSub.subscribe(‘atguigu’,(_,data)=>{
console.log(data,‘ahaha’);
this.setState({
user:data
})
})
}

componentWillUnmount(){
PubSub.unsubscribe(this.token)
}

]
3>PubSub.publish(‘delete’,data) 发布消息

fetch

第一种：
hanldeClick =async ()=>{
fetch(‘http://127.0.0.1:8800/goodsDetailSearch’).then(
response=>{
return response.json()
},
error=>{
return new Promise(()=>{})
}
).then(
response=>{
console.log(‘获取数据成功’，response)
},
error=>{
console.log(‘获取数据失败’，error）
}
)
}

第二种：
hanldeClick =async ()=>{
try{
const response = await fetch(‘http://127.0.0.1:8800/goodsDetailSearch’)
const data = await response.json()
console.log(data)
}catch(err){
console.log(err)
}
}

第三种：
hanldeClick =async ()=>{
fetch(‘http://127.0.0.1:8800/goodsDetailSearch’).then(
response=>{
return response.json()
}
).then(
response=>{
console.log(‘获取数据成功’，response)
}
).catch(error){
console.log(error)
}
}

8.SPA的理解
8.1 单页web应用
8.2 整个应用只有一个完整的页面
8.3点击页面中的链接不会刷新页面，只会做页面的局部更新
8.4数据都需要通过ajax请求获取，并在前端异步展示

9.react-router-dom的react的web路由理解
9.1安装：npm install react-router-dom
9.2使用：在app.js中使用：
import ‘./App.css’;
import {Link,Route} from ‘react-router-dom’
import home from ‘./compoments/home’
import about from ‘./compoments/about’

function App() {
return (

   <Link to="/about">about</Link>
   <Link to="/home">home</Link>
  ===============
  <Route path="/about" component={about}></Route>
  <Route path="/home" component={home}></Route>
  
</div>

);
}

export default App;
9.3在index.js中增加：
import {BrowserRouter} from ‘react-router-dom’
或
import
。0from ‘react-router-dom’

或

import {Link,NavLink,Route} from ‘react-router-dom’
{/* 点击当前内容,显示高亮 */}
about
home

或

11.解决多级路由跳转样式(bootstrap)缺失问题：

第一种方法：在index.html中，去掉点(.)

第二种方法：在index.html中修改为：

第三种方法：把BrowserRouter改为HashRouter(多了一个#，#前面的路径都代表前端的资源)

12.react路由的模糊匹配与严格匹配(默认是模糊匹配)–（严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由）

12.1默认是模糊匹配:

about

12.2 精准匹配增加 exact={true} ：

about

13.React_Redirect的使用(默认显示的路由内容)，增加一行：

  import {Redirect} from 'react-router-dom'

  {/* </Switch>不会向下再匹配 */}
  <Switch> 
    <Route exact={true} path="/about" component={about}></Route>
    <Route path="/home" component={home}></Route>
    {/* <Route path="/home" component={homeddd}></Route> */}
    <Redirect to="/home"></Redirect>
  </Switch>

   {/* 点击当前内容,显示高亮 */}

将about改为
{/* about

15.路由嵌套

16.react 向路由组件传递params参数

16.1 {/*向路由组件传递 params参数 */}
<Link to={/home/messages/detail/${item.id}/${item.title}}>{item.title}

    {/* 声明接受params传参 */}
     <Route path="/home/messages/detail/:id/:title" component={Detail}></Route>

组件页面获取数据：console.log(this.props);

16.2 {/*向路由组件传递 search参数 */}
<Link to={/home/messages/detail/?id=${item.id}&title=${item.title}}>{item.title}

     {/* search参数无需声明接受 */}
     <Route path="/home/messages/detail" component={Detail}></Route>

组件页面获取数据：
第一步引用库,不需要下载：import qs from “querystring” （urlencode 转为对象)
第二步：console.log(this.props);
const {search} = this.props.location
const result = qs.parse(search.slice(1))
console.log(result);

16.3{/*向路由组件传递 state参数 */}
<link to={{pathname:’/home/messages/detail’,state:{id:item.id,title:item.title}}}>{item.title}

  {/* state参数无需声明接受 */}
 <Route path="/home/messages/detail" component={Detail}></Route>

组件页面获取数据：console.log(this.props);
// 接受state参数
const {id,title} = this.props.location.state || {}

16.4 编程式导航不需要使用link标签或者NavLink标签进行路由跳转（第一步、第三步、第四步要相同，比如都是params传参）：
第一步设置按钮：<button onClick={()=>this.replaceShow(item.id,item.title)}>replace 查看
第二步用路由自带的事件跳转： replaceShow=(id,title)=>{
//params
this.props.history.replace(/home/messages/detail/${id}/${title})

 //search
 //this.props.history.replace(`/home/messages/detail/?id=${id}&title=${title}`)

 //state
     //this.props.history.replace(`/home/messages/detail`,{id,title})
}

或
pushShow=(id,title)=>{
this.props.history.push(/home/messages/detail/${id}/${title})
}
第三步： <Link to={/home/messages/detail/${item.id}/${item.title}}>{item.title} //params

第四步：{/* 声明接受params传参 */}

withRouter的使用一般组件上使用上路由组件
import React, { Component } from ‘react’
import {withRouter} from ‘react-router-dom’

class header extends Component {
go=()=>{
this.props.history.go(1)
}
goBack=()=>{
this.props.history.goBack()
}
goForward=()=>{
this.props.history.goForward()
}
render() {
return (

头部组件

            <button onClick={this.go}>go</button>
            <button onClick={this.goBack}>goBack</button>
            <button onClick={this.goForward}>goFoward</button>
        </div>
    )
}

}

export default withRouter(header)

antd的使用，react的ui组件库，链接：https://ant.design/index-cn
第一步安装：npm install antd --save
第二步引用：
import { Button ,DatePicker} from ‘antd’;
import ‘antd/dist/antd.css’
第三步使用： Primary Button

18.1 按需引用样式
第一步安装库：npm install react-app-rewired customize-cra
第二步修改package.json:
/* package.json */
“scripts”: {

“start”: “react-scripts start”,

“start”: “react-app-rewired start”,

“build”: “react-scripts build”,

“build”: “react-app-rewired build”,

“test”: “react-scripts test”,

“test”: “react-app-rewired test”,
}
第三步在目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config…
return config;
};
第四步安装一个插件： npm install babel-plugin-import
第五步修改 config-overrides.js文件
const { override, fixBabelImports } = require(‘customize-cra’);
module.exports = override(
fixBabelImports(‘import’, {
```
libraryName: 'antd',
```
```
libraryDirectory: 'es',
```
```
style: 'css',
```
}),
);
第六步不需要引用import ‘antd/dist/antd.css’ 样式

redux简介，学习文档：http://www.redux.org.cn/
是一个专门用于做状态管理
第一步安装：npm install redux
2.使用异步anction时，
第一步安装：npm install redux-thunk
第二步引用：import thunk from ‘redux-thunk’
第三步引用：import {createStore,applyMiddleware} from ‘redux’
第四步使用：export default createStore(countReducer,applyMiddleware(thunk))

20.react-redux跟react有关系
react-redux模型图
1.所有的UI组件都应该包裹一个容器组件，他们是父子关系
2.容器组件是真正和redux打交道的，里面可以随意的使用redux的api
3.UI组件中不能使用任何redux的api
4.容器组件会传给UI组件；(1)redux中所保存的状态 (2)用于操作状态的方法
5.备注：容器给UI传递：状态、操作状态的方法，均通过props传递

Count（容器组件）《----store.getState() redux
----》store.dispatch(action) redux

Count(UI组件) 《— props Count（容器组件）《----store.getState() redux
props —》 Count（容器组件） ----》store.dispatch(action) redux

第一步安装：npm install react-redux