React高阶组件使用详细介绍

首先 我们要了解什么是高阶组件

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

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

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

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

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

在 components下面创建一个 assist.jsx

assist.jsx 参考代码如下

import React from "react";
export function assist(Components){
    return class extends React.Component{
      render(){
        return (
          <Components {...this.props }/>
        )
      }
    }
}

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

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

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

参开代码如下

import React,{Fragment} from "react";
export default class subset extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <Fragment>
         { this.props.name }
      </Fragment>
    )
  }
}

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

这个name就需要父组件传入

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

参考代码如下

import React from "react";
import subset from "./subset";
import { assist } from "./assist";
const Subset = assist(subset);
export default class record extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: "小猫猫",
    }
  }
  render(){
    return (
      <div className="App">
         <Subset name = { this.state.name }/>
      </div>
    )
  }
}

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

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

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

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

运行代码如下

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

所以 相当于还是subset输出的

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

到此这篇关于React高阶组件使用详细介绍的文章就介绍到这了,更多相关React高阶组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！