render-props与高阶组件(一)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

今天学习react的组件复用相关

React组件复用

本节内容

• 组件复用的内容
• 如何复用
• 例子
• children代替render
• 优化
  （详细可见目录）

问题引入

问题引入：在react中，若是几个组件功能部分类似或者相同，该如何做？

答案是将各组件中相似的功能抽离出来封装到一个组件之中，当某个组件需要用到该功能时便直接拿封装好的组件用即可

复用相似功能

1.复用内容

• State
• 操作State的方法（组件状态逻辑）

2.复用方式

方法一：render props模式

方法二：高阶组件（ HOC）
注：(上面两种方式是利用react自身特点的编码技巧，演化而来的固定写法)

3.render-props模式

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

如何拿取该组件中复用的state？

使用组件时添加一个值为函数的prop，通过函数的参数获取
  <Mouse render={(mouse)=>{}}

如何渲染任意UI？     

使用该函数的返回值作为要渲染的UI的内容
<Mouse render={(mouse)=>(
<p>鼠标当前位置{mouse.x},{mouse.y}</p>)}

<Mouse render={(mouse)=>{}}

4.例子

下面我们来举个例子，上面的两条代码，便是我们下来要使用的部分代码片段

• 我们做一个获取并显示鼠标位置的例子

    // render-props模式
// 创建Mouse组件
class Mouse Render.Commonent{
  //鼠标位置状态（state）初始化
  state={
    x:0,
    y:0
  }
// 事件处理程序
  this.handlemousemove=e=>{
    this.setState({
      x:e.clientX,
      y:e.clientY
    })
  }
  //监听鼠标移动事件通过钩子函数componentDidMount(),组件完成渲染之后执行
  componentDidMount(){
    window.addEventListener('mouseover'.this.handlemousemove)
    //this.handlemousemove事件处理程序
  }
  //方法
  render(){
    return this.props.render(this,state1)
  }
  //render(){ return this.props.render(this,state1) }

class App Render.Commonent{
  render(){
    return(
      <div>
        
        <h1>render模式</h1>

        <mouse render={(mouse)=>{
          return <p>鼠标位置：{mouse.X}{mouse.Y}</p>
        }}/>
          //<mouse (mouse)=>{
         //return <p>鼠标位置：{mouse.X}{mouse.Y}</p>}/>
        
      </div>
    )
  }

}
ReactDOM.render{<App />,document.getElementById('root')}
//html
   <div id="root"></div>

5。children代替render属性

• 并非该模式叫render props，就必须使用render的prop，只是一种称呼
• 可以使用children 代替render 如上面部分将对应代码换成注释的部分就可变为chlidren方式代替render属性

render-props模式代码优化

1.添加props校验
2.在组件卸载时解除mousemove事件绑定，代码如下

componentWillUnmount(){
window.removeEventListener('mousemove',this.handleMouseMove)
}