react：高阶组件和Render Props

高阶组件

• HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
• 高阶组件是参数为组件，返回值为新组件的函数。组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。

基本用法

const HOCFactory = (Component) => {
	class HOC extends React.component {
		// 在此定义多个组件的公共逻辑
		render () {
			return <Component {...this.props} />
		}
	}
	return HOC
}
const EnhancedComponent1 = HOCFactory(WrappedComponent1)
const EnhancedComponent2 = HOCFactory(WrappedComponent2)

redux 中 connect 是高阶组件

Render Props

和高阶组件正相反，高阶组件是高阶组件包着传入的组件。

Render Props则是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

具有 render prop 的组件接受一个返回 React 元素的函数，并在组件内部通过调用此函数来实现自己的渲染逻辑。（告诉这个组件你要怎么渲染）

比较

HOC：模式简单，但是会增加组件层级
Render Props：代码简洁，学习成本较高

按需使用