快捷導(dǎo)航

React高階組件使用詳細(xì)介紹

更新時(shí)間：2023年01月29日 15:08:08 作者：-耿瑞-

高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React高階組件使用小結(jié)，一起看看吧

首先我們要了解什么是高階組件

第一高階組件必須是一個(gè)函數(shù)

第二高階組件接收一個(gè)參數(shù)，這個(gè)參數(shù)也必須是一個(gè)組件

第三他的返回值也是一個(gè)組件

至于高階組件的作用我們后續(xù)會(huì)講解本文只是帶大家認(rèn)識(shí)一下高階組件并手把手帶大家創(chuàng)建一個(gè) 下面我們來(lái)創(chuàng)建一個(gè)react項(xiàng)目

然后在src目錄下創(chuàng)建文件夾目錄 components

在 components下面創(chuàng)建一個(gè) assist.jsx

assist.jsx 參考代碼如下

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

這就是一個(gè)簡(jiǎn)單的高階組件首先我們定義并導(dǎo)出了一個(gè)函數(shù) 他接收一個(gè)參數(shù) 叫Components 到時(shí)你用這個(gè)方法就需要他的這個(gè)參數(shù)是一個(gè)組件

然后這個(gè)方法return回去的還是一個(gè)組件 Components 而我們這里的 {…this.props } 表示將父組件給的props整個(gè)傳給這個(gè)Components組件

然后在 components下創(chuàng)建一個(gè) 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>
    )
  }
}

這里就是簡(jiǎn)單創(chuàng)建了一個(gè)組件使用了React下的Fragment 然后在界面中使用了 this.props下的name

這個(gè)name就需要父組件傳入

然后我們?cè)赾omponents下創(chuàng)建 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>
    )
  }
}

此時(shí) 就可以看到我們r(jià)ecord.jsx同時(shí)引入了 subset.jsx和assist.jsx

用subset組件作為參數(shù) 調(diào)用了 assist下的assist函數(shù) 也就是我們的高階組件

這樣就滿足了參數(shù)是組件的需求聲明一個(gè)Subset接受高階組件的返回值他還是一個(gè)組件

然后在界面中使用了這個(gè)Subset 并傳遞了 name 值對(duì)應(yīng)本組件的 state下的name

運(yùn)行代碼如下