React高阶组件

[twosugar]

react的高阶组件可以理解为，将一个组件作为参数传入一个函数，最后return一个组件。在函数中我们可以做一系列操作。参考文章

先写一个简单的高阶组件

//simpleHoc.js

import React, {Component} from 'react';

const simpleHoc = ItemComponent => {
  console.log('simpleHoc')
  return class extends Component {
    render() {
      return <ItemComponent />
    }
  }
}

export default simpleHoc;

//usual.jsx

import React, {Component} from 'react';
import simpleHoc from './simpleHoc';

class Usual extends Component {
  constructor(props) {
    super()
  }

  render() {
    console.log('Usual组件')
    return <div>我是Usual组件</div>
  }
}

export default simpleHoc(Usual);

最后可以看到浏览器打印："simpleHoc"，"Usual组件"

高阶组件获取子组件状态

//simpleHoc.js

import React, {Component} from 'react';

const simpleHoc = ItemComponent => {
  console.log('simpleHoc')
  return class extends Component {
    componentDidMount() {
      console.log(this.instanceComponent, 'instanceComponent');
    }
    
    render() {
      return <ItemComponent
      ref={instanceComponent => this.instanceComponent = instanceComponent}
      />
    }
  }
}

export default simpleHoc;

//usual.jsx

import React, {Component} from 'react';
import simpleHoc from './simpleHoc';

class Usual extends Component {
  constructor(props) {
    super()
    this.state = {
      a: '1'
    }
  }

  render() {
    console.log('Usual组件')
    return <div>我是Usual组件</div>
  }
}

export default simpleHoc(Usual);