高階函數與高階組件

高階函數基本概念

1 函數能夠做爲參數被傳遞

setTimeout(()=>{
   console.log("aaaa")
  },1000)

2 函數能夠做爲返回值輸出

function foo(x){
        return function(){
           return x
        }
      }

 //平時遇到的應用場景      
//ajax中
 $.get("/api/getTime",function(){
     console.log("獲取成功")
  })
 //數組中
 some(), every(),filter(), map()和forEach（）

高階組件

1 高階組件就是接受一個組件做爲參數並返回一個新組件的函數

2 高階組件是一個函數，並不一個組件

例子： A組件裏面包含B組件

import React , { Component }from 'react'
    function A(WrappedComponent){
     return  class A extends Component{  //這裏必須retrun出去
       render() {
        return(
         <div>
           這是A組件
           <WrappedComponent></WrappedComponent>
         </div>
         )
       }
      }
     }

    export default  A

高階組件的應用

傳參數

import React, { Component } from 'react';
import './App.css';
import B from './components/B'
class App extends Component {
  render() {
   return (
     <div className="App">
        這是個人APP
       <B age="18" name="Tom"/>
     </div>
   );
  }
}
export default App;


//A組件
import React , { Component }from 'react'
export default (title)=> WrappedComponent => {
return  class A extends Component{
 render() {
  return(
    <div>
       這是A組件{title}
       <WrappedComponent sex="男" {...this.props}></WrappedComponent>
    </div>
    )
   }
 }
}

 //B組件
import React , { Component }from 'react'
import A from './A.js'
class B extends Component{
  render() {
   return(
    <div>
     性別：{this.props.sex}
     年齡：{this.props.age}
     姓名：{this.props.name}
    </div>
   )
  }
 }
export default  A('提示')(B)

//有兩種方式引用高階函數，第一種入上
//第二種

import React , { Component }from 'react'
import a from './A.js'
@a('提示')
class B extends Component{
  render() {
   return(
    <div>
     性別：{this.props.sex}
     年齡：{this.props.age}
     姓名：{this.props.name}
    </div>
   )
  }
 }
export default B

使用第二種方式的步驟

繼承方式高階組件的實現

//D.js
import React from 'react'
const modifyPropsHOC= (WrappedComponent) =>  class NewComponent extends WrappedComponent{
render() {
   const element = super.render();
   const newStyle = {
     color: element.type == 'div'?'red':'green'
   }
   const newProps = {...this.props,style:newStyle}
   return React.cloneElement(element,newProps,element.props.children)
 }
} 
export default modifyPropsHOC


 // E.js

import React, {Component} from 'react'
import D from './D'
class E extends Component {
render(){
return (
  <div>
  個人div
  </div>
);
}
}

export default D(E)


// F.js
import React, {Component} from 'react'
import d from './D'
class F extends Component {
render(){
return (
  <p>
  個人p
  </p>
);
}
}

export default d(F)


import React, { Component } from 'react';
import './App.css';
import E from './components/E'
import F from './components/F'
class App extends Component {
  render() {
return (
  <div className="App">
   這是個人APP
   <E></E>
   <F></F>
  </div>
  );
  }
}

export default App;

修改生命週期

import React from 'react'
const modifyPropsHOC= (WrappedComponent) =>  class NewComponent extends WrappedComponent{
componentWillMount(){
alert("個人修改後的生命週期");
}
render() {
   const element = super.render();
   const newStyle = {
color: element.type == 'div'?'red':'green'
   }
   const newProps = {...this.props,style:newStyle}
   return React.cloneElement(element,newProps,element.props.children)
  }
}

export default modifyPropsHOC