react 高阶组件的几种应用

属性代理：

    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;