高阶函数与高阶组件

高阶函数基本概念

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