组件复用的说明
-
思考：如果两个组件中的部分功能相似或相同，该如何处理？
-
处理方式：复用相似的功能（联想函数封装）
-
复用组件的状态和组件的逻辑，组件的UI不一样
-
两种解决方案
- render-props
- HOC（高阶组件）
-
这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式（写法）
render-props基本使用
- 思路：将要复用的state和操作state的方法封装到一个组件中
- 问题：渲染的UI内容不一样，该怎么办
- 在使用组件时，添加一个值为函数的prop，通常把这个prop命名为render，在组件内部调用这个函数。传进来的函数负责渲染UI
- 问题2：如果获取组件内部的状态
- 在组件内部调用方法的时候，把状态当成参数进行传递
class Mouse extends React.Component {
// … 省略state和操作state的方法
render() {
return this.props.render(this.state)
}
}
<Mouse render={(mouse) => (
<p>鼠标当前位置 {mouse.x}，{mouse.y}</p>
)}/>
children代替render属性
- 注意：并不是该模式叫 render props 就必须使用名为render的prop，实际上可以使用任意名称的prop
- 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做：render props模式
- 推荐：使用 children 代替 render 属性
<Mouse>
{({x, y}) => <p>鼠标的位置是 {x}，{y}</p> }
</Mouse>
// 组件内部：
this.props.children(this.state)
// Context 中的用法：
<Consumer>
{data => <span>data参数表示接收到的数据 -- {data}</span>}
</Consumer>
render-props优化
- 推荐：给 render props 模式添加 props校验
- 应该在组件卸载时解除 mousemove 事件绑定
Mouse.propTypes = {
chidlren: PropTypes.func.isRequired
}
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
封装一个组件，用于提取公共的状态和逻辑，比如鼠标的位置以及鼠标位置的更新，渲染的内容是不确定的，让组件接受一个叫children的prop，而且children必须是一个函数
