render-props和高阶组件

React组件复用概述

思考：如果两个组件中的部分功能相似或相同，该如何处理？
处理方式：复用相似的功能（联想函数封装）
复用什么：1、state 2、操作state的方法
两种方式：1、render props 模式 2.高阶组件（HOC）
注意：这两种方式 不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式

render props模式

思路： 将要复用的state和操作state的方法封装到一个组件中

如何拿到组件中复用的state?
在使用组件时，添加一个值为函数的prop,通过函数参数来获取（需要组件内部实现）
如何渲染任意的UI
使用该函数的返回值作为要渲染的UI内容

// mouse 可以拿到组件中的state状态 
<Mouse render={(mouse) => {}}></Mouse>
//	然后就可以使用组件中的值 渲染任意的UI
<Mouse render={(mouse) => (
	<p>鼠标当前位置{mouse.x} {mouse.y}</p>
)}></Mouse>

优化：
1、添加校验
2、在组件解除时 卸载所有手动绑定事件

高阶组件

目的：实现状态逻辑复用
采用：包装（装饰）模式
思路：高阶组件是一个函数，接收要包装的组件，返回增强厚的组件
高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent

使用步骤：
1、创建一个函数，名称约定以with开头
2、指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
3、在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
4、在该组件中，渲染参数组件，同时状态通过prop传递给参数组件
5、调用该高阶组件，传入要增强的组件，通过放回值拿到增强厚的组件，并将其渲染到页面中

设置displayName
为高阶组件设置displayName便于调试时区分不同的组件

传递props
问题： props 丢失
原因：高阶组件没有往下传递props
解决： 渲染高阶组件时，将state和this.props 一起传递给组件