React学习之2.高阶组件HOC(high order component)

高阶组件是参数为组件，返回值为新组件的函数。
React使用HOC代替mixins，避免mixins的一些缺陷：

1. 不清楚的依赖关系
2. 命名冲突
3. mixins和组件的高耦合

使用

import React from 'react';
import ReactDOM from 'react-dom';

function Hoc(Component, someData) {
	class WrapperComponent extends React.Component {
		constructor(props) {
			super(props);
			this.state = {
				owner: someData.owner
			}
		}
		componentDidMount() {
			console.log(Component.displayName)
		}
		render() {
			// 将不相关的 props(other) 传递给被包裹的组件
			const { owner, ...other } = this.props;
			return (
				<Component owner={this.state.owner} {...other}></Component>
			);
		}
	}
	WrapperComponent.displayName = `HocCpt(${Component.displayName})`; // 标识displayName用于调试
	return WrapperComponent;
}

class Hello extends React.Component {
	render() {
		return (
			<div>
				hello world
				<div>
					owner:{this.props.owner} age:{this.props.age}
				</div>
			</div>
		)
	}
}
Hello.displayName = 'HelloCpt'; // 标识displayName用于调试

const App = Hoc(Hello, { owner: '张三' });

// 不要在render中使用HOC，会导致频繁渲染
ReactDOM.render(
	<App age="25" />,
	document.getElementById('root')
);

注意

1. 不要在 render 方法中使用 HOC
2. 务必复制静态方法
3. Refs 不属于props， 不会被传递。使用 React.forwardRef API 解决