react 之高阶组件

#头条创作挑战赛#

来吧，展示。

react高阶组件怎么用呢

第一我们要清楚一个道理，

react高阶组件并不是react api

它是基于react组合特性，形成的设计模式。

组件就是将props转为ui，hoc就是将组件转换为组件。

下面直接展示代码。

//创建一个高阶组件
function withMouse(WrappedComponent) {
  //该组件提供复用的状态逻辑
  class Mouse extends React.Component {
     //鼠标状态
     state = {
      x:0,
      y:0
     }

     handleMouseMove = e => {
      this.setState({
        x:e.clientX,
        y:e.clientY
      })
     }

    //控制鼠标状态逻辑
     componentDidMount () {
      window.addEventListener('mousemove',this.handleMouseMove)
     }

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

     render () {
      return <WrappedComponent {...this.state} />
     }
  }
  return Mouse
}

const Cat = props => {
   <div>
     <div>11111</div>
  <img src={logo} alt=""  style={
    {
      positon:"absolute",
      top:props.y,
      left:props.x,
      width:"80px",
      height:"80px"
    } }/>
   </div>

}

// 调用高阶组件来增强猫捉老鼠的组件：
const MouseCat = withMouse (Cat) ;
渲染组件里面调用MouseCat

 高阶组件
    <MouseCat />

props丢失问题？

高阶组件没有往下传props。导致props丢失。

解决方案：

将state和props一起传递给组件。

高阶组件说白了就是组件加强。

一个组件变为一个加强的组件。

高阶组件组件嵌套。props丢失。直接将state和props一起传递给组件就行。