react使用总结一：react 高阶组件使用

最新推荐文章于 2024-03-24 23:41:34 发布

弹琴弹琴

最新推荐文章于 2024-03-24 23:41:34 发布

阅读量413

点赞数

分类专栏： React点滴知识文章标签： react react高阶组件

本文链接：https://blog.youkuaiyun.com/bbsyi/article/details/82491305

版权

React点滴知识专栏收录该内容

48 篇文章

订阅专栏

本文深入探讨了React中高阶组件（HOC）的概念及其应用，通过具体实例展示了如何利用高阶组件来增强和复用组件逻辑，替代旧的mixins模式，提升React应用程序的开发效率和代码可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.IntervalEnhance.js定义高阶组件

// 高阶组件
// 主要用于替代旧的mixins



import React from 'react';
//1.还记得箭头函数吗？没错，这就是一个箭头函数。这个函数接受一个组件为输入参数，返回一个类。
//ComposedComponent就是输入参数，也就是需要包装增强的组件。
//export var IntervalEnhance就是把前面定义的函数命名为IntervalEnhance export出去给其他的模块使用。
export var IntervalEnhance = ComposeComponent => class extends ComposeComponent {
    // 2.displayName设定为ComponentEnhancedWithIntervalHOC是为了在DevTools中方便调试。
    // 在DevTools里这个组件就会被叫做ComponentEnhancedWithIntervalHOC
    static displayName = 'ComponentEnhancedWithIntervalHOC';

    //3.组件里的定义常量
    constructor(props) {
        super(props);
        this.state = {
            seconds: 0
        };
    }

    // 3.组件里的定义生命周期
    componentWillUnmount() {
        clearInterval(this.interval);
    }

    // 3.组件里的定义生命周期
    componentDidMount() {
        this.interval = setInterval(this.tick.bind(this), 1000);
    }

	// 3.组件里的定义方法
    tick() {
        this.setState({
            seconds: this.state.seconds + 1000
        });
    }

    // 3.组件里的定义方法
    alertFn(){
    	alert(1)
    }

    // 4.这样的写法会把当前高阶组件的全部props和state都发送给传入组件使用。
    render() {
    		const props = {
		      ...this.props,
		      alertFn: this.alertFn,
		      a:0
		    }

        return (
            // 4
            <ComposeComponent {...props} {...this.state}/>
        );
    }
}

2.Page1组件中使用高阶组件包裹组件，主要用途替代Mixins

import React, { Component } from 'react';
import {Router,Route,browserHistory} from 'react-router-dom';
import { Button } from 'antd-mobile';
import PropTypes from 'prop-types';

import { connect } from '../../react-redux.js';

// 1.引入高阶组件
import {IntervalEnhance} from '../../IntervalEnhance';


class Page1 extends Component {
	static propTypes = {
	    store: PropTypes.object
	}

	componentWillMount(){
		 // this.alertFn();
		// this.state.alertFn()
		// 
		console.log(this.props)
		// 3.使用高阶组件
		this.props.alertFn()
	}


	render() {
	    return (
	      <div className="page1">
	        这是page1
	        <br/>
	        themeColor:{ this.props.themeColor }
	        <br/>
	        {/*3.使用高阶组件*/}
	        <Button type="primary">{this.props.a}</Button>
	        <br/>
	       	{/*3.使用高阶组件*/}
	        <input onBlur={this.props.alertFn}/>	
	      </div>
	    );
  	}

}

const mapStateToProps = (state) => {
	  return {
	    themeColor: state.themeColor
	  }
}
Page1 = connect(mapStateToProps)(Page1)

// 2.高阶组件包裹
export default IntervalEnhance(Page1);

参考：https://blog.youkuaiyun.com/bbsyi/article/details/82381364