帮助你理解React——高级组件

说到React，我们首先想到的应该是组件。在React眼里，一切都是组件。甚至我们用来获取数据的axios也可以用组件来表示...比如我们可以这样封装""/*get、delete、head、post、put和patch-必需*/url=""/*要请求的url端点-必需*/data={}/*post数据-可选*/params={}/*queryString数据-可选*/config={}/*axios配置-可选*/debounce={200}/*请求事件之间的最小时间-可选*/debounceImmediate={true}/*在开始时发出请求或debounce的尾部-可选*/isReady={true}/*可以发出axios请求-可选*/onSuccess={(response)=>{}}/*在axios请求成功时调用-可选*/onLoading={()=>{}}/*在axios请求开始时调用-可选*/onError=(error)=>{}/*在axios请求错误时调用-可选*//>在项目中我们可以写import{AxiosProvider,Request,Get,Delete,Head,Post,Put,Patch,withAxios}from'react-axios'...render(){return(

)有点过分了。。。至少我觉得还是有必要遵循我个人的代码习惯。如果所有的组件都这样处理请求，包括一些简单的get请求，我觉得真的没有必要，而且我们的一些通用API也不好统一管理那么，到底什么是高层组件？高阶组件是一个函数，它接受一个组件and返回一个新组件。右键翻译------>高阶分量是一个函数，函数接受一个分量作为参数，返回一个新的分量嗯，看起来很简单，但实际也是1，具体，我们以高阶函数为例，一个showUserPermit，一个showUserVipInfo，这两个函数首先从localStorage中读取userVIP，然后对userVIP做一些处理。functionshowUserPermit(){让vip=localStorage.getItem('u_V');console.log(`您可以享受${u_V}的权限...`);}functionshowUserVipInfo(){letvip=localStorage.getItem('u_V');console.log(`你当前的VIP等级是${u_V}，马上升级...`);}showUserPermit();showUserVipInfo();2.我们发现两个API中有两个一模一样的代码，非常冗余，这样不好，我们改一下}functionshowUserVipInfo(u_V){console.log(`你当前的VIP等级是${u_V}，马上升级...`);}3.这样写好像简单了点，但是这两个API的功能必须完全依赖参数u_V，调用这两个函数之前必须先获取到这个参数，有点耦合，我们改造函数showUserPermit(u_V){console.log(`可以享受${u_V}的权限。。让vip=localStorage.getItem('u_V');wrappedFunc(vip);};returnnewFunc;}module.exports={showUserPermit:wrapU_V(showUserPermit),showUserVipInfo:wrapU_V(showUserVipInfo)}4.wrapU_V是一个没有任何副作用的产品高阶函数，那么它的含义是什么？你又做了什么？它为我们处理了u_V，并调用了目标函数（函数参数），这样当你再次使用导出的showUserPermit时，你就不需要关心u_V电平是怎么来的，需要什么外部条件，你只需要知道它可以帮助我实现我想做的事！同时，省去了每次调用前都要看它的参数？怎么会？你甚至不需要关心wrapU_V内部是如何实现的。Array.map和setTimeout可以称为高阶函数。高阶组件。高阶组件是没有副作用的纯函数。是的，这是一个功能。构造importReact,{Component}from'react'...classshowUserPermitextendsComponent{constructor(props){super(props);this.state={VIP:''}}componentWillMount(){让VIP=localStorage.getItem('u_V');this.setState({VIP})}render(){return()}}exportdefaultshowUserPermit;/*-*/importReact,{Component}来自'react'...classshowUserVipInfoextendsComponent{constructor(props){super(props);this.state={VIP:''}}componentWillMount(){让VIP=localStorage.getItem('你_V');this.setState({VIP})}render(){return()}}exportdefaultshowUserVipInfo;刚才发现的问题可以映射到这两个组件中。根据上面的思路，我们做了一个处理importReact,{Component}from'react'module.exports=Wrap:(WrappedComponent)=>{classreComponentextendsComponent{constructor(){super();this.state={VIP:''}}componentWillMount(){让VIP=localStorage.getItem('u_V');this.setState({VIP})}render(){return}}returnreComponent}让我们简化showUserVipInfo和showUserPermit组件importReact,{Component}from'react';从'wrapWithUsername'导入{Wrap}作为模板；classshowUserPermitextendsComponent{render(){return(

showUserPermit{this.props.username}

)}}showUserPermit=templete(showUserPermit);exportdefaultshowUserPermit;/*--*/importReact,{Component}from'react';import{Wrap}astempletefrom'wrapWithUsername';classshowUserVipInfoextendsComponent{render(){return(

showUserVipInfo{this.props.username}

)}}showUserPermit=templete(showUserPermit);导出默认showUserVipInfo;和更高阶的多个目标组件可以分布在一个组件中。举个我们项目中的例子。右上角的时间选择组件和echarts组件是两个不同身份特有的一些行为和风格。其他的完全一样，包括state和sharing方法完全一样上面的代码render(){return(...