高阶组件

高阶函数

当一个函数A是接受函数参数B时  则函数A就是高阶函数
               数组的sort map  filter every some
当一个函数A返回了函数B时   则函数A就是高阶函数
	 函数的bind

高阶组件

高阶组件是  接受了组件A(基础组件)作为参数并且返回了一个组件B的函数、
   属性代理指的是  在返回的组件B中定义组件A(基础组件)需要的属性 并且传递给基础组件

高阶组件案例

const {Component} = React
 class Heaven extends Component{
     state =  {
         name:'LongShortParty',
         arr :['html','css','js','node','react']
     }
     render(){
         const {arr} = this.state
         return (
             <ul>
                 {
                     arr.map(item=><li key={item}>{item}</li>)
                 }
             </ul>
         )
     }
 }

 const reverseInherit = (BaseComponent)=>{
     return class extends BaseComponent{ //返回了一个继承了  基础组件的组件
         render(){
             console.log(this.state)
             return super.render()
         }
     }
 }
 const Result1 = reverseInherit(Heaven)

  ReactDOM.render(<Result1 />,document.getElementById('box'))

高阶组件的属性代理

理解：在返回的组件B中定义组件A(基础组件)需要的属性 并且传递给基础组件
 const {Component} = React

  function Heaven1(props){
      return <input type="text" {...props} placeholder="第一个受控组件"/>
  }
  class Heaven2 extends Component{
      render(){
          return <input type="text" {...this.props} placeholder="第二个受控组件"/>
      }
  }

  const highOrderComponent = (BaseComponent)=>{
      //BaseComponent  是函数接受的组件
      return class extends Component{  //返回一个新的组件
          state = {
              value:''
          }
          handleChange = e=>{
              this.setState({value:e.target.value})
          }
          render(){
              const {value} = this.state
              const newProps = {
                  value,
                  onChange:this.handleChange
              }
              const props = Object.assign({},newProps,this.props)
              return <BaseComponent {...props}/>
          }
      }
  }

  const Result1 = highOrderComponent(Heaven1)
  const Result2 = highOrderComponent(Heaven2)

   ReactDOM.render(<div>
       <Result1 a="heaven"/>
       <Result1 b="海文"/>
   </div>,document.getElementById('box'))