面试官：你是怎样进行 react 组件代码复用的

var LogMixin = {  log: function() {    console.log('log');  },  componentDidMount: function() {    console.log('in');  },  componentWillUnmount: function() {    console.log('out');  }};
var User = React.createClass({  mixins: [LogMixin],  render: function() {    return (<div>...</div>)  }});
var Goods = React.createClass({  mixins: [LogMixin],  render: function() {    return (<div>...</div>)  }});

const EnhancedComponent = higherOrderComponent(WrappedComponent);

import React,{Component} from 'react';
const HOC = (WrappedComponent) =>  class WrapperComponent extends Component {    state = { number: 0 };    btnClick = () => {        this.setState({            number: this.state.number++        })    }    render() {        const newProps = {            btnClick: this.btnClick,            number: this.state.number        }        return (            <div>                rere HOC                <WrappedComponent {...this.props} {...this.newProps} />            </div>        )    }}
export default HOC;
class MyComponent extends Component{    //...}
export default HOC(MyComponent)

const MyContainer = (WrappedComponent) =>    class extends WrappedComponent{        render(){            return super.render();        }    }

2. 不要在 render 方法内创建高阶组件
3. 不要改变原始组件(高阶组件就是一个没有副作用的纯函数。)
4. 透传不相关的 props
### 解决的问题
1. 高阶组件就是一个没有副作用的纯函数，各个高阶组件不会互相依赖耦合2. 高阶组件也有可能造成冲突，但我们可以在遵守约定的情况下避免这些行为3. 高阶组件并不关心数据使用的方式和原因，而被包裹的组件也不关心数据来自何处。高阶组件的增加不会为原组件增加负担
### 存在的问题
1. HOC 需要在原组件上进行包裹或者嵌套，如果大量使用 HOC，将会产生非常多的嵌套，这让调试变得非常困难2. HOC 可以劫持 props，存在相同名称的 props，则存在覆盖问题在不遵守约定的情况下也可能造成冲突，而且 react 并不会报错。3. 当存在多个 HOC 时，你不知道 Props 是从哪里来的。4. HOC 属于静态构建,静态构建即是重新生成一个组件，即返回的新组件，不会马上渲染，即新组件中定义的生命周期函数只有新组件被渲染时才会执行。
**在这个范式下，代码通过一个类似于 装饰器（decorator） 的技术进行共享。首先，你的一个组件定义了大量需要被渲染的标记，之后用若干具有你想用共享的行为的组件包裹它。因此，你现在是在 装饰 你的组件，而不是混入你需要的行为！
## Render props
> Render Props 从名知义，也是一种剥离重复使用的逻辑代码，提升组件复用性的解决方案。在被复用的组件中，**通过一个名为“render”(属性名也可以不是 render，只要值是一个函数即可)的属性，该属性是一个函数，这个函数接受一个对象并返回一个子组件，会将这个函数参数中的对象作为 props 传入给新生成的组件**。
### 它的特点
1. 传入函数的属性，就是  想要共享的 state，这个相同的 state 是组件的状态，或者行为2. 术语 “render prop” 是指一种技术，用于使用一个值为函数的 prop 在 React 组件之间的代码共享。3. render prop 仅仅就是一个函数。4. `render prop`是一种模式，重点是 prop，而不是 render，任何被用于告知组件需要渲染什么内容的函数 prop 在技术上都可以被称为 “render prop”.5. 这里的组合模型是 动态的！每次组合都发生在 render 内部，因此，我们就能利用到 React 生命周期以及自然流动的 props 和 state 带来的优势。6. 具有 render prop 的组件接受一个函数，该函数返回一个 React 元素并调用它，而不是实现自己的渲染逻辑
### 小栗子
```xml<DataProvider render={data => ( <h1>Hello {data.target}</h1>)}/>

const withMouse = (Component) => {  return class extends React.Component {    render() {      return <Mouse render={mouse => (        <Component {...this.props} mouse={mouse}/>      )}/>    }  }}