react高阶组件

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

import React,{Component} from 'react'
import D from './d'
@D
class A extends Component{
    render(){
        return(
            <div>
                <p>AAAA</p>
                我的名字:{this.props.name}
                我的年龄:{this.props.age}
            </div>
        )
    }
}

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 (
        <div>
          <h1>高阶组件</h1>
          <WrappedComponent />
        </div>
      )
    }
  }  
}

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 (
      <div>
        <A name={'wzq'} age ={18}/>
        <B />
        <C name={'wzqc'} age ={19} />
      </div>
    )
  }
}

操纵props

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

image.png

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

image.png

使用代理方式的高阶组件，可以改变
<WrappedComponent {...this.props}/>

代理

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

还可以从高阶组件给普通组件传入props，实现对普通组件属性的增加
<WrappedComponent {...this.props} sex={'男'}/>

image.png

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

function d(WrappedComponent){
  return class D extends Component {
    render() {
      console.log(this.props)
      const {age,...otherprops} = this.props
      return (
        <div>
          <h1>高阶组件</h1>
          <WrappedComponent {...otherprops} sex={'男'}/>
        </div>
      )
    }
  }  
}

这样普通组件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(
            <div>BBBB</div>
        )
    }
}
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 (
        <div>
          <h1>高阶组件</h1>
          <WrappedComponent {...otherprops} sex={'男'} ref={this.refc}/>
        </div>
      )
    }
  }  
}

可以通过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(
            <div>
                <p>AAAA</p>
                <input type='text' value={this.state.value} onChange={this.changeInput}/>
                <br/>
                我的名字:{this.props.name}
                我的年龄:{this.props.age}
                我的性别:{this.props.sex}
            </div>
        )
    }
}

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

class A extends Component{
    state={
        value:''
    }
    render(){
        console.log(this.props)
        return(
            <div>
                <p>AAAA</p>
                <input type='text' {...this.props}/>
            </div>
        )
    }
}

全靠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 (
        <div>
          <h1>高阶组件</h1>
          <WrappedComponent {...otherprops} sex={'男'} {...newProps} ref={this.refc}/>
        </div>
      )
    }
  }  
}

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