React - 高级组件的简单应用

港控/mmm° 2022-04-14 21:05 206阅读 0赞

高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式。

具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

举个栗子

![20181120205850488.png][]

比如我们需要在input标签下面加上一个计时器。你可以写一个组件Time然后使用它，但是这很死板。

比如这个Time中没有“下午”，或者说它含有你不想要的其他部分，不是很灵活，但是用高级组件可以很好的解决。

function withTime(WrappedComponent) {//传入一个组件
      return class extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            date: new Date(),
          }
        }
    
        componentDidMount () {
          this.timeID = setInterval( () => this.tick(), 1000);
        }
        componentWillUnmount () {
          clearInterval(this.timeID);
        }
        tick () {
          this.setState({
            date: new Date()
          })
        }
        //上面都是一些内部逻辑
        render () {
          return (//返回组件，但是加上了我们的time
            <WrappedComponent time = { this.state.date } { ...this.props } />
          );
    
        }
      }
    }
    
    class App extends React.Component {
      constructor (props) {
          super(props);
      }
    
    render () {
        return (
          <div>
          <input type = 'text'  ref = { n => this.input = n} />
          <div> { this.props.time.toLocaleTimeString()} </div>
          
          </div>
          //通过this.props.time调用
        );
      }
    }
    
    let App1 = withTime(App);
    ReactDOM.render(
      <App1 />,
      document.getElementById("root")
    )

高阶组件俩点应用

1：属性代理 （也就是说在新组件里面加上一下App里面没有的属性，额外的属性）

2：反向继承

例如：我们写返回组件是可以写成return class extends WrappedComponent \{ \}

我们可以在里面修改一下声明周期函数，渲染逻辑等

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220415/fb93aad47e224c589cacf334bd320952.png
[20181120205850488.png]: /images/20220415/d19d90591b0d46199be59f801cd46aa3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 React的组件学习

React的组件学习参考资料：https://zh-hans.react.dev/learn/your-first-component 一、定义组件 e

╰半夏微凉°/ 2024年02月20日 11:11/ 0 赞/ 21 阅读

相关 React【React+Redux应用_Thunk、React+Redux应用_组件、React+Redux应用_DevTools、为 React 项目添加 Redux、使用数据】(十一)

![6312befb2ea340038671b6ebc777e6d9.gif][] 文章目录 React+Redux应用\_Thunk React+Redux应用\_

系统管理员/ 2024年02月19日 10:50/ 0 赞/ 49 阅读

相关探索 React.js 高级技术：组件和状态处理

介绍我们将深入研究 React.js 的核心概念，包括组件、状态和道具。通过掌握这些概念，您将为创建更复杂的交互式应用程序打下坚实的基础。所以让我们继续我们的 React

清疚/ 2023年10月12日 00:13/ 0 赞/ 63 阅读

相关 web前端高级React - React从入门到进阶之组件的组合使用

系列文章目录 [第一章：React从入门到进阶之初识React][React_React] [第一章：React从入门到进阶之JSX简介][React_JSX]

系统管理员/ 2023年01月08日 04:23/ 0 赞/ 145 阅读

相关 web前端高级React - React从入门到进阶之组件的状态提升

系列文章目录 [第一章：React从入门到进阶之初识React][React_React] [第一章：React从入门到进阶之JSX简介][React_JSX]

迷南。/ 2023年01月07日 05:59/ 0 赞/ 185 阅读

相关 react-grid-layout的简单应用

react-grid-layout有什么用呢？实现拖拽，网格布局安装 react-grid-layout npm install react-grid

桃扇骨/ 2022年11月07日 14:33/ 0 赞/ 357 阅读

相关 React-Native开发总结-组件高级使用方案汇总

最近更新时间：2018年03月01日11:40:10 [《我的博客地图》][Link 1] 一门技术的实践，需要反复的思考，react-native本身封装了

Bertha 。/ 2022年06月02日 12:11/ 0 赞/ 202 阅读

相关 React - 在React中简单应用Redux

[Redux][] 引入Redux就是为了方便管理状态，那么在React代码中如何使用了。换句话说就是如何使用storea里面维护的state，然后在react中如何产生

我就是我/ 2022年04月15日 06:57/ 0 赞/ 218 阅读

相关 React - 高级组件的简单应用

高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式。具体而言，高阶组件就是一个函数，且该函数接受一个组件作

港控/mmm°/ 2022年04月14日 21:05/ 0 赞/ 207 阅读

相关 react-4 简单的组件的使用

之前我们基于 create-react-app 创建出下面目录结构的项目： ![20190215114853784.png][] 我们也简单了解了react 是如何

女爷i/ 2022年03月19日 05:24/ 0 赞/ 182 阅读