React的高阶组件（HOC）

高阶函数

接受一个或者多个函数作为参数返回一个函数不对传入的函数做任何原型上的修改

举个栗子🌰

localStorage.setItem('userName', 'wwj');

const welcome = () => {
	const userName = localStorage.getItem('userName');
	console.log('welcome ' + userName);
}

const goodby = () => {
	const userName = localStorage.getItem('userName');
	console.log('goodby ' + userName);
}

welcome();
userName();

上面两个函数中有一部分代码时完全一样的，const userName = localStorage.getItem('userName');，即可以把相同的代码扔给一个中间函数去做

localStorage.setItem('userName', 'wwj');

const highOrderFunc = (wrapperFunc) => {
	const userName = localStorage.getItem('userName');
	// 返回一个匿名函数用来处理
	return function() {
		wrapperFunc(userName);
	}
}
function welcome(userName) {
	console.log('welcome ' + userName);
}

function goodby(userName) {
	console.log('goodby ' + userName);
}

welcome = highOrderFunc(welcome);
goodby = highOrderFunc(goodby);

welcome();
goodby();

上面highOrderFunc就是一个高阶函数，它处理了userName，并将userName传递给了目标函数，当我们调用最终的welcome/goodby函数的时候，根本就不需要考虑userName是怎么来的

高阶组件

接受一个组件作为参数返回一个新的组件不对传入的组件进行原型上的修改

我们将上面的例子改成组件的形式

import React from 'react';

export default function HighOrderComp(WrapperComp) {
	return class extends React.Component {
		constructor(props) {
			super(props);
			this.state = {
				userName: ''
			}
		}
		
		componentDidMount() {
			const userName = localStorage.getItem('userName');
			this.setState({ userName });
		}
		render() {
			const { userName } = this.state;
			return (
				<WrapperComp  userName={userName} />
			)
		}
		
	}
}

高阶组件其实是一个函数，而不是一个组件，返回的是一个包裹目标组件的容器组件

import React from 'react';
import HighOrderComp from './HighOrderComp';

class Welcome extends React.Component {
	render() {
		return (
			<div> welcome { this.props.userName } </div>
		);
	}
}

Welcome = HighOrderComp(Welcome);
export default Welcome

import React from 'react';
import HighOrderComp from './HighOrderComp';

class Goodby extends React.Component {
	render() {
		return (
			<div> welcome { this.props.userName } </div>
		);
	}
}

Goodby = HighOrderComp(Goodby);
export default Goodby

高阶组件就是把userName通过props传递给了不同的目标组件，而目标组件只管从props拿userName就好了

react-redux的connect函数就是一个高阶函数把redux的state和action创建函数，通过props注入给了Component 你在目标组件Component里面可以直接用this.props去调用redux state和action创建函数了

ConnectedComment = connect(mapStateToProps, mapDispatchToProps)(Component);

React的高阶组件（hoc）

React的高阶组件（HOC）

高阶函数

高阶组件

CATALOG