react高阶组件

react高阶组件其实就是一个函数，函数里面返回一个组件
下面用代码来解释：
a.js是普通组件

import React,{Component} from 'react'
import D from './d'
@D
class A extends Component{
    render(){
        return(
            

                
AAAA
                我的名字:{this.props.name}
                我的年龄:{this.props.age}
            
        )
    }
}

export default A

d.js是外层高阶组件，本身是函数，里面返回继承Component的子组件

import React, { Component } from 'react'
//1.普通组件2包裹3.传入普通组件参数4.高阶组件必须大写
function d(WrappedComponent){
  return class D extends Component {
    render() {
      console.log(this.props)
      return (
        

          
高阶组件
          
        
      )
    }
  }  
}

export default d

App.js调用普通组件

import React, { Component } from 'react';

import A from './components/a'
import B from './components/b'
import C from './components/c'

export default class App extends Component {
  render() {
    return (
      

        
        
        
      

    )
  }
}

操纵props

给A组件加props，发现props在d.js中可以找到

image.png

但是在页面上，A组件和B组件却没有显示

image.png

使用代理方式的高阶组件，可以改变

代理

这时就普通组件就可以拿到props了。

还可以从高阶组件给普通组件传入props，实现对普通组件属性的增加

image.png

当然增加之外还可以删减属性。比如取出age属性，就在d.js的函数改为：

function d(WrappedComponent){
  return class D extends Component {
    render() {
      console.log(this.props)
      const {age,...otherprops} = this.props
      return (
        

          
高阶组件
          
        
      )
    }
  }  
}

这样普通组件a.js和c.js就取不到age的值了

image.png

访问ref

代理组件第二个特点ref,就是能获得整个子组件
修改b.js

import React,{Component} from 'react'
import D from './d'
@D
class B extends Component{
    getName(){
        return 'bbbb'
    }
    render(){
        return(
            
BBBB
        )
    }
}
export default B

修改d.js

function d(WrappedComponent){
  return class D extends Component {
    refc=(instance)=>{
      //instance获得子组件，先判断子组件是否有这种方法。
      instance.getName&&console.log(instance.getName())
    }
    render() {
      console.log(this.props)
      const {age,...otherprops} = this.props
      return (
        

          
高阶组件
          
        
      )
    }
  }  
}

可以通过instance获取子组件，但是会出现很多不必要的问题，所以一般不要使用

image.png

抽取状态

修改a.js变成受控组件

class A extends Component{
    state={
        value:''
    }
    changeInput=(e)=>{
        console.log(e.target.value)
        this.setState({
            value:e.target.value
        })
    }
    render(){
        return(
            

                
AAAA
                
                

                我的名字:{this.props.name}
                我的年龄:{this.props.age}
                我的性别:{this.props.sex}
            
        )
    }
}

如果有很多子组件，那么就可以提取到高阶组件。
所以改变a.js中代码：

class A extends Component{
    state={
        value:''
    }
    render(){
        console.log(this.props)
        return(
            

                
AAAA
                
            
        )
    }
}

全靠this.props也就是高阶组件传值
那么高阶组件怎么改变呢：

function d(WrappedComponent){
  return class D extends Component {
    refc=(instance)=>{
      //instance获得子组件，先判断子组件是否有这种方法。
      instance.getName&&console.log(instance.getName())
      console.log('instance',instance)
    }
    state={
      value:''
    }
    handleChange=(e)=>{
      this.setState({
          value:e.target.value
      })
    }
    render() {
      const newProps = {
        value:this.state.value,
        onChange:this.handleChange
      }
      console.log(this.props)
      const {age,...otherprops} = this.props
      return (
        

          
高阶组件
          
        
      )
    }
  }  
}

定义一个newProps，其中的value和onChange就是之前普通组件A里的value和事件，在高阶组件中，定义并传入给子组件，以此使子组件变成受控组件