React组件复用

通常组件复用有两种方式：1.使用render props模式 2.高阶组件(HOC)

render props：

1.创建要复用的组件，在组件中提供状态和操作状态的方法

2.将要复用的状态作为props.render(state)的参数暴露出去

注意：提供的render函数必须有返回值，另外如果将jsx写为组件的子节点，则父组件可以用this.props.children的形式

高阶组件(HOC)：

高阶组件是一个函数，在函数中有可复用的类组件，通过props将可复用的状态传给被包装组件

使用步骤：

1.创建一个函数，一般使用with开头便于区分

2.给函数传入一个参数，该参数为将要渲染的组件，因此命名应该以大写字母开头

3.在这个函数中创建一个类组件，提供需要复用的状态和操作状态的方法并返回

4.在该组件中渲染作为参数传入的组件，并通过展开运算符的方式将复用的状态作为参数组件的属性

5.调用该高阶组件函数并传入需要增强的组件，即可返回添加复用参数和方法后的组件

注意在使用React调试工具进行调试时，为区分高阶组件得到的组件名称，需要设置displayName来进行区分。设置方式示例如下：

Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`

function getDisplayName(WrappedComponent){
    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}