01-react高阶组件

高阶组件实质上就是高阶函数

下面的需求是当屏幕变化的时候，在屏幕上同步输出当前屏幕的尺寸

import React from 'react';
import ReactDOM from 'react-dom';


class Foo extends React.Component {
  state = { 
    x : document.documentElement.clientWidth,
    y : document.documentElement.clientHeight
   }
  componentDidMount() {
    window.addEventListener('resize',()=>{
      this.setState({
        x : document.documentElement.clientWidth,
        y : document.documentElement.clientHeight
      })
    })
  }
  componentWillUnmount() {
    window.removeEventListener('resize');
  }
  render() { 
    const {x,y} = this.state;
    return ( <div> {x}-----------{y} </div> );
  }
}

class Sub extends React.Component {
  state = { 
    x : document.documentElement.clientWidth,
    y : document.documentElement.clientHeight
   }
  componentDidMount() {
    window.addEventListener('resize',()=>{
      this.setState({
        x : document.documentElement.clientWidth,
        y : document.documentElement.clientHeight
      })
    })
  }
  componentWillUnmount() {
    window.removeEventListener('resize');
  }
  render() { 
    const {x,y} = this.state;
    return ( <button> {x}-----------{y} </button> );
  }
}
 
class App extends React.Component{
  render(){
    return(
      <>
      <Sub/>
      <Foo/>
      </>
    )
    
  }
}

ReactDOM.render(<App />,document.getElementById('root'));

我们可以看出Foo组件和Sub组件有大部分重复的逻辑代码，这时候我们可以运用高阶组价来提取重复的部分

import React from 'react';
import ReactDOM from 'react-dom';

const toSize= (Component)=>{
  return class WithSize extends React.Component{
    state = { 
      x : document.documentElement.clientWidth,
      y : document.documentElement.clientHeight
     }
    componentDidMount() {
      window.addEventListener('resize',()=>{
        this.setState({
          x : document.documentElement.clientWidth,
          y : document.documentElement.clientHeight
        })
      })
    }
    componentWillUnmount() {
      window.removeEventListener('resize');
    }
    render(){
      return(
      	//将数据通过props的方式传送给参数组件
        <Component {...this.state}/>
      )
    }
  }
}
class Foo extends React.Component {
  render() { 
    const {x,y} = this.props;
    return ( <div> {x}-----------{y} </div> );
  }
}


class Sub extends React.Component {
  render() { 
    const {x,y} = this.props;
    return ( <button> {x}-----------{y} </button> );
  }
}

const NewFoo = toSize(Foo)
const NewSub = toSize(Sub)
class App extends React.Component{
  
  render(){

    return(
      <div>
      <NewFoo/>
      <NewSub/>
      </div>
    )
    
  }
}

ReactDOM.render(<App />,document.getElementById('root'));

高阶组件只关心逻辑的复用，并不关心怎么渲染