让 render-xxx 模式都可以互换。
基础
所有上面提到的三种模式都是为了处理 mixin 要处理的问题的。在我们继续之前，我们来看一些例子。
如果你已经掌握这两个概念，可以直接跳过这一节看后面的内容
Render Prop
首先，我们来写一个组件来记录 count，并绘制 render prop 里的绘制都在 render 方法里调用了。
class CounterComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
update = type => {
if (type === "Inc") {
this.setState(({ count }) => ({ count: count + 1 }));
} else if (type === "Dec") {
this.setState(({ count }) => ({ count: count - 1 }));
}
};
render() {
return this.props.render({
...this.state,
...this.props,
update: this.update
});
}
}
注意：callback 属性也可以叫个别的名字，不一定就是 render。只不过这个模式叫做 render prop。
接下来我们需要一个组件来把需要的内容绘制到屏幕上：
const Counter = ({ count, update }) => {
<div>
<button onClick={() => update("Inc")}>Inc</button>
{count}
<button onClick={() => update("Dec")}>Dev</button>
</div>;
};
Counter组件接受 count 值和一个 update 方法，然后显示一个增加、一个减少按钮以及当前的 count 值。
最后我们可以用CounterComponent组件来给Counter增加一些其他的功能：
render(
<CounterComponent render={props => <Counter {...props} />>} />,
document.getElementById('root')
);
高阶组件
上文讲解了 render prop 模式。现在来看看怎么使用高阶组件来达到同样的目的。
const withCounter = Component =>
class Hoc extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
update = type => {
if (type === "Inc") {
this.setState(({ count }) => ({ count: count + 1 }));
} else if (type === "Dec") {
this.setState(({ count }) => ({ count: count - 1 }));
}
};
render() {
return <Component {...this.state} {}
}
};
看上面的例子，我们可以要把需要绘制的组件放到另外一个全新的组件里面去。在这个新的组件里包含了加强的 state 和 props 等内容。
const CounterExample = withCounter(Counter);
render(<CounterExample />, document.getElementById("root"));
目前我们已经覆盖了基本的概念。我们可以使用不同的模式来达到相同的目的。下面我们来关注一下如何让这几个模式达到互换的目的。
在 render props 和高阶组件之间转换
有的时候你用的库提供了一个高级组件，但是你最喜欢的是通过JSX的方式来使用组件。有时会遇到一个提供了 render props 的库，但是你喜欢的是高阶组件。一个很有趣的事实是这些模式可以幻想转换。
我们来根据上面的例子来加一些方法可以让高阶组件和 render props 模式可以互相转换。
fromHoc: HOC -> RenderProp
toHoc: RenderProp -> HOC
toHoc方法可以归结为：
toHoc: Render => Comp => props => (
<Render {...Props} render={props => <Comp {...props} />} />
);
你也可以看使用 Render Props来作为替代实现。
它会把一个 render prop 模式转化为高阶组件。
const withCounter = toHoc(CounterComponent);
const CounterExample = withCounter(Counter);
从高阶组件转化为 render prop 有一点麻烦。我们需要把一个 render prop 的组件传入到高阶组件里。多亏了 Brent Jackon 的这篇文章。
fromHoc: hoc => {
class Render extends React.Component {
render() {
return this.props.children(this.props);
}
}
return hoc(Render);
};
或者，使用两外一种不用 class 的方式。这次要感谢 Rodrigo Pombo 的这个例子。
fromHoc: hoc => hoc(props => props.render(props));
我们可以写一个轻量的 helper 方法来实现高阶组件和 renderprops 的转化。注意，我们也可以在初始化 toHoc 方法的时候使用另外的 render name，因为 render prop 可以能有一个不一样的名字，或者是一个子 prop。
const iso = {
fromHoc: hoc => hoc(props => props.render(props)),
toHoc: Render => Compo => props => (
<Render {...props} render={props => <Comp {...props} />} />
)
};
总结
Render prop，回调绘制和高阶组件都是可以互换的。大多数的时候 render props 可以满足要求。但是你也可以通过某些方法让它在这些模式之间互相转换。
非常感谢 Brent Jackson，Kent C. Dodds 以及 Rodrigo Pombot 提供了fromHoc方法的实现，帮我们解决了不少的问题。
