React复习进阶-高阶组件的使用-配置装饰模式-新版context的使用

时间：2023-04-05 13:53:04 HTML5

所谓高阶组件甚至接受一个组件作为参数，返回一个新组件的函数，用于提高组件的“自能力”，提高组件的复用性。并附加新属性，为Dumb添加样式和newName//App.jsimportReactfrom'react';importDumbfrom'./HocDemo';functionApp(){return(

);}exportdefaultApp;//HocDemo.jsimportReactfrom'react'//传入一个组件，返回一个功能组件constHOC=(Comp)=>(props)=>{conststyle={display:'flex',justifyContent:'center',alignItems:'center',width:'500px',height:'300px',border:`2pxsolid${props.color}`,}return}//Puppet组件functionDumb(props){return(我是{props.newName||props.name}||bodyis{props.name}

)}exportdefaultHOC(Dumb);也可以为Dumb增加生命周期来处理逻辑//修改HOC函数，在函数内部定义一个组件，最后返回组件constHOC=(Comp)=>{classNewDumbextendsReact.Component{componentDidMount(){console.log('NewDumb')}render(){conststyle={display:'flex',justifyContent:'center',alignItems:'center',width:'500px',height:'300px',border:`2pxsolid${this.props.color}`,}return}}returnNewDumb}2.高阶组件decorator写法首先需要几个包yarnaddreact-app-rewiredcustomize-cra@babel/plugin-proposal-decorators-D和目录新建一个config-overrides.js（相当于vue.config.js）的内容如下const{override,addDecoratorsLegacy}=require('customize-cra');module.exports=override(addDecoratorsLegacy(),);修改HocDemo.js//其他部分不变。装饰器必须使用类来声明组件@HOCclassDumbextendsReact.Component{render(){const{style,newName,name}=this.propsreturn(我是{newName||name}||bodyis{name}

)}}exportdefaultDumb;3.新版context的使用写一个Context.js在App.js中使用，声明一个context并初始化datastore，封装两个函数withConsumer，withProvider通过装饰器使父组件具有provider功能，Container组件下withConsumer包裹的组件具有consumer功能，实现跨级组件通信Parent=>grandsonimportReact,{Component}from"react";//generateAcontextconstContext=React.createContext();conststore={name:"Zzz",};//为Provider封装一个高阶组件constwithProvider=Comp=>props=>();//为Consumer封装一个高阶组件constwithConsumer=Comp=>props=>({value=>});//让孙子组件有足够的消费能力@withConsumerclassGrandsonextendsComponent{render(){return

{this.props.值.名称

;}}//是父组件有能力提供@withProviderclassProviderextendsComponent{render(){return

;}}//一个容器组件functionContainer(props){return(

)}//一个容器组件2functionContainer2(props){return(

)}//一个容器组件3functionContainer3(props){return(

Container3

)}exportdefaultProviderdemo代码https://github.com/尚Zzz/h...