react基础知识

配置代理

方法一

在package.json中进行如下配置

"proxy":"http://localhost:5050"

说明：

优点：配置简单，前端请求资源时可以不加任何前缀

缺点：不能配置多个代理

方法二

在src下创建代理配置文件

const proxy = require('http-proxy-middleware')
​
module.exports = function(app){
app.use(
proxy('/api',{
target:'http://localhaost:5050',
changeOrigin:true
pathRewrite:{'^/api':''}
}),
proxy('/api1',{
target:'http://localhaost:5051',
changeOrigin:true
pathRewrite:{'^/api1':''}
})
)
}

说明：

优点：可以配置多个代理，可以灵活地控制请求是否走代理

缺点：配置繁琐，前端请求资源时必须加前缀

高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

具体而言，高阶组件是参数为组件，返回值为新组件的函数。

注意，HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有副作用。

被包装组件接收来自容器组件的所有 prop，同时也接收一个新的用于 render 的 data prop。HOC 不需要关心数据的使用方式或原因，而被包装组件也不需要关心数据是怎么来的。

注意事项

1.不要在 render 方法中使用 HOC

2.务必复制静态方法。可以使用 hoist-non-react-statics 自动拷贝所有非 React 静态方法

3.Refs 不会被传递

严格模式

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

注意：

严格模式检查仅在开发模式下运行；它们不会影响生产构建。

StrictMode 目前有助于：

• 识别不安全的生命周期

• 关于使用过时字符串 ref API 的警告

• 关于使用废弃的 findDOMNode 方法的警告

• 检测意外的副作用

• 检测过时的 context API

今天学到的内容：标签体内容是特殊的标签属性！

路由传参

1.params传参

路由链接（携带参数）：<Link to='/home/tom/18'>详情</Link>

注册路由（声明接收）：<Route path='/home/:name/:age' component={test}/>

接收参数：const {name,age}=this.props.match.params

2.search参数

路由链接（携带参数）：<Link to='/home/?name=tom&age=18'>详情</Link>

注册路由（无需声明接收）：<Route path='/home' component={test}/>

接收参数：const {search} = this.props.location

注意：获取到的search参数是urlencoded编码字符串，需要借助querystring解析

3.state参数

路由链接（携带参数）：<Link to='{{path:"/home",state:{name:"tom",age:"18"}}}'>详情</Link>

注册路由（无需声明接收）：<Route path='/home' component={test}/>

接收参数：const {search} = this.props.state

redux

redux是什么

1. redux是一个专门用于做状态管理的JS库

2. 它可以用在react、angular、vue等项目中，但是基本与react配合使用

3. 作用：集中式管理react应用中多个组件共享的状态

什么场景是需要使用redux

1. 某个组件的状态，需要让其他组件可以随时共享

2. 一个组件需要改变另一个组件的状态

redux工作流程