高階元件

1.函式可以作為引數被傳遞

  setTimeout(() => {

        console.log(1)

    }, 1000 );


2.函式可以作為返回值輸出

function demo(x){

        return  function(){

            return x;

        }

    }

//高階函式的應用

//時間函式

setTimeout(function(){

    console.info("Hello World");

},1000)

let i=0;

setInterval(function(){

    console.info("Hello World");

})

//ajax

$.get("/api/getTime",function(){

    console.info("獲取成功");

})

//陣列

some()、every()、filter()、map()和forEach();
 

通過這個圖我們可以看出只有圖片是不一樣的, 其他的都是相同,
我們寫一個公共元件A , 然後把他封裝成一個方法(加引數),匯入  其他元件呼叫這個方法,傳輸圖片引數,來實現

import React, { Component } from 'react'

function A(WrappedComponent){
  return  class A extends Component {
    render() {
      return (
        <div className="a_container">
            <div className="header">商品展示
              <div className="close">x</div>
            </div>
            <div>
                <WrappedComponent/>
            </div>
          
        </div>
      )
    }
  }
}

export default A;
 

第一個圖片

import React, { Component } from 'react'
import A from './../components/A';
class B extends Component {
  render() {
    return (
      <div >
         <img style={{width:'179px',height:'298px'}} src={require('./../images/u716.png')} alt=""/>
      </div>
    )
  }
}
export default A(B);
 

第二個圖片

import React, { Component } from 'react'
import A from './../components/A';
class C extends Component {
  render() {
    return (
      <div >
          <img style={{width:'179px',height:'298px'}} src={require('./../images/person.png')} alt=""/>
      </div>
    )
  }
}
export default A(C);

第三個圖片

import React, { Component } from 'react'
import A from './../components/A';
class D extends Component {
  render() {
    return (
      <div >
         <img style={{width:'179px',height:'298px'}} src={require('./../images/u7023.png')} alt=""/>
      </div>
    )
  }
}
export default A(D);

這就是高階元件,是不是賊簡單,看懂的給我點個贊