React高阶组件使用详细介绍.docx

第

React高阶组件使用详细介绍

第一高阶组件必须是一个函数

第二高阶组件接收一个参数，这个参数也必须是一个组件

第三他的返回值也是一个组件

至于高阶组件的作用我们后续会讲解本文只是带大家认识一下高阶组件并手把手带大家创建一个下面我们来创建一个react项目

然后在src目录下创建文件夹目录components

在components下面创建一个assist.jsx

assist.jsx参考代码如下

importReactfromreact;

exportfunctionassist(Components){

returnclassextendsReact.Component{

render(){

return(

Components{...ps}/

这就是一个简单的高阶组件首先我们定义并导出了一个函数他接收一个参数叫Components到时你用这个方法就需要他的这个参数是一个组件

然后这个方法return回去的还是一个组件Components而我们这里的{ps}表示将父组件给的props整个传给这个Components组件

然后在components下创建一个subset.jsx

参开代码如下

importReact,{Fragment}fromreact;

exportdefaultclasssubsetextendsReact.Component{

constructor(props){

super(props);

this.state={

render(){

return(

Fragment

{}

/Fragment

这里就是简单创建了一个组件使用了React下的Fragment然后在界面中使用了ps下的name

这个name就需要父组件传入

然后我们在components下创建record.jsx

参考代码如下

importReactfromreact;

importsubsetfrom./subset;

import{assist}from./assist;

constSubset=assist(subset);

exportdefaultclassrecordextendsReact.Component{

constructor(props){

super(props);

this.state={

name:小猫猫,

render(){

return(

divclassName=App

Subsetname={}/

/div

此时就可以看到我们record.jsx同时引入了subset.jsx和assist.jsx

用subset组件作为参数调用了assist下的assist函数也就是我们的高阶组件

这样就满足了参数是组件的需求声明一个Subset接受高阶组件的返回值他还是一个组件

然后在界面中使用了这个Subset并传递了name值对应本组件的state下的name

运行代码如下

其实相当于将subset传给了assist而assist并没有写太多逻辑只是接受到参数组件又使用了参数组并将父组件给到props给了参数组件

所以相当于还是subset输出的

其实高阶组件还是让逻辑灵活了很多他的具体场景我们后续会更新