React 解决 “cross-cutting concerns” 问题

在React 官方文档中描述render prop 时，是为了解决横切关注问题“cross-cutting concerns”。“cross-cutting concerns”指的是两个非常不一样的组件存在一些类似的功能。对于“cross-cutting concerns” 问题，React 给出了三种解决方案来复用类似功能：

1）Minxs：解决部分method类似问题，但是已被弃用，ES6 的class 不支持该属性，只有在使用插件createReactClass时可使用，存在大量的负面影响，官方已不推荐使用。（https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html）

2）HOC：高阶组件模式是React官方推荐用来取代Minxs解决“cross-cutting concerns” 问题的方案。将类似功能写在高阶组件内，差异化的功能各自封装在不同的基础组件。使用时根据需求，将基础组件作为参数传给高阶组件生成函数，返回该基础组件的高阶组件， 一般这个高阶组件会向基础组件中添加一些新的props。

3）Render Prop：这是一种模式，用来解决部分UI类似的问题。通过props传递一个返回React Element的函数给组件，组件在render时调用这个函数并将返回的React Element插入组件。这个功能与Vue的内容分发slot 功能一样。可以有多个，可以接受组件的参数。 一般在开发容器组件时，是非常需要的一个特性。例如开发一个资源位容器组件，资源位的数据获取都是公共逻辑，但是渲染时根据资源类型不一样，展示方式会不同，这时可以使用 render prop 定制自己的展示方式。Render Prop 模式可以直接使用children 属性作为prop，这时可以直接利用JSX的“Functions as Children” 特性，不使用显示的prop属性，直接将函数写在children中。