react 高阶组件的几种应用

最新推荐文章于 2025-07-04 10:48:17 发布

xiaoxiang-chen

最新推荐文章于 2025-07-04 10:48:17 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/fengzijinliang/article/details/80668962

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了React中高阶组件的应用方法，包括属性代理、通过refs获取组件实例、抽离state等技巧，并探讨了反向继承的概念及其实现方式。

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

属性代理：

1.操作props:

高阶组件：

import React , {Component } from 'react';

const wrapComponent = (TempComponent) => class extends Component{

	handleClick(){
		console.log('click')
	}

	render(){
		return(
			<TempComponent {...this.props} handleClick={this.handleClick}/>
		)
	}
}

export default wrapComponent;

应用：

import React, { Component } from 'react';;
import LifeCircle from './test/LifeCircle.js';
import wrapComponent from './example/WrapComponent.js'
const WrapedComponent = wrapComponent(LifeCircle)

class App extends Component {

  render() {
    return (
      <div className="App">
        <WrapedComponent hello="hello world"/>
      </div>
    );
  }
}

export default App;

2.refs获取组件实例:

高阶组件获取refs:

import React , {Component } from 'react';

const wrapComponent = (TempComponent) => class extends Component{

	componentDidMount(){
		console.log(this.refs.childComponent)
	}

	render(){
		return(
			<TempComponent ref='childComponent' {...this.props} />
		)
	}
}

export default wrapComponent;

3.抽离state:

要抽离state的组件：

import React,{Component } from 'react';

export default class Login extends Component { 
	render(){
		return (
			<div>
				<div>
					<label id="username">账户</label>
					<input type="text" name="username" {...this.props.getField('username')}/>
				</div>
				<div>
					<label id="password">密码</label>
					<input type="text" name="password" {...this.props.getField('password')}/>
				</div>	
				<div onClick={this.props.handleSubmit}>
					提交
				</div>
			</div>
		)
	}
}

高阶组件：

import React,{Component } from 'react';

const formCreate = WrapComponent => class extends Component {

	constructor(){
		super();
		this.state={fields:{}}
	}

	onChange = key => e =>{
		const { fields } = this.state;
		fields[key] = e.target.value;
		this.setState({
			fields,
		});
	}

	handleSubmit=()=>{
		console.log(this.state.fields)
	}

	getField = fieldName =>{
		return {
			onChange:this.onChange(fieldName)
		}
	}

	render(){
		const props = {
			...this.props,
			handleSubmit:this.handleSubmit,
			getField:this.getField,
		}

		return(<WrapComponent {...props}/>)
	}
}

export default formCreate;

1.反向继承（也称控制反转）:

去继承WrappedComponen；本来是一种嵌套的关系，结果高阶组件返回的组件却继承了WrappedComponent，这看起来是一种反转的关系。

通过继承WrappedComponent，除了一些静态方法，包括生命周期，state，各种function，我们都可以得到。

父组件：

import React , { Component } from 'react';

export default class Usual extends Component {

	constructor(){
		super();
		this.state = {
			usual : 'usal'
		}
	}

	componentDidMount(){
		console.log('didMount')
	}

	render(){
		return (
			<div>
				{this.state.usual}
			</div>
		)
	}
}

高阶组件：

import React from 'react';

const iiHoc = WrapedComponent => class extends WrapedComponent {

	componentDidMount(){
		console.log(this.state)
		this.setState({
			usual:1
		})

		setInterval(()=>{
			this.setState({usual:this.state.usual+1})
		}, 1000)
	}

	render(){
		console.log('hello world')
		return super.render();
	}
}

export default iiHoc;