React组件化资源Context参考HOC参考Hooks参考组件跨层级通信-Context范例：模拟redux存放全局状态，在组件间共享importReactfromreact;//创建上下文constContext=React.createContext();//获取Provider和ConsumerconstProvider=Context.Provider;constConsumer=Context.Consumer;//Child显示计数器，并能修改它，多个Child之间需要共享数据functionChild(props){return
props.add()}{props.counter}
;}exportdefaultclassContextTestextendsReact.Component{//state是要传递的数据state={counter:0};//add方法可以修改状态add=()={this.setState(nextState=({counter:nextState.counter+1}));};//counter状态变更render(){return(
高阶组件范例：为展示组件添加获取数据能力);}}//Hoc.jsimportReactfromreact;//Lesson保证功能单一，它不关心数据来源，只负责显示functionLesson(props){return(
{props.stage}-{props.title}
);}//模拟数据constlessons=[{stage:React,title:核心API},{stage:React,title:组件化1},{stage:React,title:组件化2}];//高阶组件withContent负责包装传入组件Comp//包装后组件能够根据传入索引获取课程数据，真实案例中可以通过api查询得到constwithContent=Comp=props={constcontent=lessons[props.idx];//{...props}将属性展开传递下去return
范例：改造前面案例使上下文使用更优雅链式调用//withConsumer是高阶组件工厂，它能根据配置返回一个高阶组件functionwithConsumer(Consumer){returnComp=props={return;};}//Child显示计数器，并能修改它，多个Child之间需要共享数据//新的Child是通过withConsumer(Consumer)返回的高阶组件包装所得constChild=withConsumer(Consumer)(function(props){return
props.add()}title={props.name}{props.counter}
;});exportdefaultclassContextTestextendsReact.Component{render(){return();}}//高阶组件withLog负责包装传入组件Comp//包装后组件在挂载时可以输出日志记录constwithLog=Comp={//返回组件需要生命周期，因此声明为class组件returnclassextendsReact.Component{render(){return
装饰器写法CRA项目中默认不支持js代码使用装饰器语法，可修改后缀名为tsx则可以直接支持注意修改App.js中引入部分，添加一个后缀名要求cra版本高于2.1.0组件复合-Composition复合组件给与你足够的敏捷去定义自定义组件的外观和行为组件复合范例：Dialog组件负责展示，内容从外部传入即可，