配置代理
方法一
在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
目前有助于:
今天学到的内容:标签体内容是特殊的标签属性!
路由传参
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是什么
-
redux是一个专门用于做状态管理的JS库
-
它可以用在react、angular、vue等项目中,但是基本与react配合使用
-
作用:集中式管理react应用中多个组件共享的状态
什么场景是需要使用redux
-
某个组件的状态,需要让其他组件可以随时共享
-
一个组件需要改变另一个组件的状态
redux工作流程