基于react的高阶函数的使用方法

1.HOC  -- 高阶组件Hign order component

   从函数式编程过来的一个概念，它源于HOF high order function 高阶函数

HOF高阶函数： - -就是一个函数接收一个算子函数，然后返回一个算子函数

HOC高阶组件 -- 就是一个函数接收一个组件，然后返回一个组件

就是一个函数接收一个组件；

定义一个高阶组件，需要先定义一个函数，在这个函数中返回一个组件

import React,{Component} from 'react'
function layout(cb){
   //function cb(it){
  // return {myKey:it.key,myName:it.name}
 //}
   return function(Child){
    class Layout extends Component{
      state ={
      menuList:[
      {key:'IndexBar',name:'索引栏'},
      {key:'NavBar',name:'导航栏'},
      {key:'Pagination',name:'分页'}，
]，
   nowMenu:{key:'',name:''}
}
   render(){
    return(
   <div><header><h2>这是头部内容</h2></header></div>
   <div><aside><ul>{this.state.menuList.map(it=>{
       return(
    <li onClick={()=>{
    //不能赋值为it对象，因为对象时引用数据类型
   //this.setState({nowMenu:it})
   //需要对数据进行深拷贝，但是it只有一层，浅拷贝和深拷贝是一个意思
  //this.setState({nowMenu:{mykey:it.key,myName:it.name}})
  //通过一个函数得到返回的对象
  this.setState({nowMenu:cb(it)})
}}key={it.key}>{it.name}</li>
)
})}
</ul>
</aside>
<main>
 {/* 在这里可以接收一个组件，如果是Vue就很简单，默认插槽即可*/}
 {/* 为什么要在子组件的属性进行参数传递，因为react只有state和props数据发生变化才会触发组件更新 */}
 {/* 因为数据在layout高阶组件中，那么要想触发Child组件更新只有props数据 */}
{/* <Child myKey={this.state.nowMenu.key} myName={this.state.nowMenu.name}/>*/}
 {/* 动态绑值*/}
<Child {...this.state.nowMenu} />
</main>
</div>
</div>
)
}
  }
return Layout
}
}

export default layout

 

import React,{Component} from 'react'
import layout from './layout'
class App extends Component{
   render(){
   console.log(this.props)
   return(
   <div><h2>这是主要内容</h2>
   <p>当前菜单：{this.props.zsKey} - - {this.props.zsName}</p>
   </div>
)
}
}
//传递一个函数进去
function cb(it){
   return {zsKey:it.key,zsName:it.name} 
}
let NewComponent = layout(cb)(App)
export default NewComponent

//这个高阶组件连接成为了子组件传入到高阶组件然后导出成为新的组件