react 之高阶组件

最新推荐文章于 2024-08-13 08:50:36 发布

Json为你创意赋能

最新推荐文章于 2024-08-13 08:50:36 发布

阅读量101

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/sktt11/article/details/129128903

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章介绍了React高阶组件(HOC)的概念，它不是ReactAPI的一部分，而是一种设计模式。高阶组件用于封装组件，提供复用的状态逻辑。文中通过示例展示了如何创建和使用高阶组件，同时解决了在组件嵌套时props丢失的问题，解决方案是将state和props一起传递给被包装的组件。

摘要由CSDN通过智能技术生成

来吧，展示。

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 MouseCat = withMouse (Cat) ;

渲染组件里面调用MouseCat

<MouseCat />

props丢失问题？

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

解决方案：

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

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

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

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