关于react.js高阶组件的使用（学习笔记）

高阶组件的定义

首先 引入包：

import React,{PureComponent} from "react"

然后在App.js文件中修改引入文件类型，这里使用的js文件是 ‘高阶组件.js’

App.js:

import React from 'react';

import HighComponent from './practice/高阶组件'
function App() {
  return (
    <div className="App">
      <HighComponent name="Jack" age="18"/>
    </div>
  );
}

export default App;

这里导出的是App函数，我们也可以写成 类的形式，如：

class App extends PureComponent {
	render() {
		return (
			<div className="App">
				<HighComponent name="Jack" age="18" />
			</div>
		)
	}
}

这是es6的写法。

再在高阶组件中使用，

首先是需要展示的组件：

class HighComponent extends PureComponent {
	render() {
		return (
			<div>
				<div>{this.props.name}</div>  //这里展示的是App.js中传过来的属性
				<div>{this.props.age}</div>
			</div>
		)
	}
}

function enhanceComponent(Wrapper){  //这里接受传入的组件
	function FatherComponent(props){  //props 用以接受父组件中传入的参数 
		return <Wrapper name={...props}/>
	}
	FatherComponent.displayName="Kobe";
	return FatherComponent;   //这里可以修改在dev工具中展示的组件的名字  注意displayName是						       //驼峰大小写；还要记得返回函数
}

使用es写法：

function enhanceComponent(Wrapper) {
	class FatherComponent extends PureComponent {
		render() {
			return <Wrapper {...this.props}/>
		}
	}

	FatherComponent.displayName = "Kobe"
	return FatherComponent
}

然后导出：

const App = enhanceComponent(HighComponent)  //传入组件，这里可以直接导出

export default App