什么是高阶组件

  • 本身就是一个函数，接收一个组件没返回一个组件
  • 重用代码，有很多时候组件需要用到同样的一个逻辑，为了提升性能和优化代码，我们可以把这份逻辑提出来，封装成为高阶组件
  • 不想触碰这些组件内部逻辑，这时候可以使用高阶组件，一个独立于原有组件的函数，可以产生新的组件

  • 高阶组件实现方式可以分两大类

    1.      -代理方式的高阶组件<br />           -继承方式的高阶组件

  • 只继承 ```javascript import React from ‘react’ function Color(Component: any) {

    1.       class ColorS extends React.Component {
    2.           render() {
    3.               return (
    4.                   <div style={{ color: 'red', fontSize: '20px' }}>
    5.                       <Component num={0} />
    6.                   </div>
    7.               );
    8.           }
    9.       }
    10.       return ColorS

    } export default Color

使用 Color(component)

  2. - 代理
  3. ```javascript
  4. import React from 'react'
  5. function Color(obj: any) {
  6.     if (obj.add !== '/') {
  7.         return (Component: any) => {
  8.             class Ss extends React.Component {
  9.                 render() {
  10.                     return (
  11.                         <div>
  12.                             <h1>404</h1>
  13.                         </div>
  14.                     );
  15.                 }
  16.             }
  17.             return Ss
  18.         }
  19.     } else {
  20.         return (Component: any) => {
  21.             class ColorS extends React.Component {
  22.                 render() {
  23.                     return (
  24.                         <div style={{ color: 'red', fontSize: '20px' }}>
  25.                             <Component num={0} />
  26.                         </div>
  27.                     );
  28.                 }
  29.             }
  30.             return ColorS
  31.         }
  32.     }
  33. }
  34. export default Color
  37. 使用  Color(处理参数)(component)

怎么在高阶组件获取ref

  1. 父组件 
  2.  <Ee getRef={(e) => {
  3.           console.log(e)
  4.  }} />
  6. 高阶组件
  7.  <Component num={0} {...this.props} />
  8. 把props传给子组件
  10. 使用高阶的组件
  11.     constructor(props: any) {
  12.         super(props)
  13.         props.getRef(this)
  14.     }