什么是高阶组件

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

-代理方式的高阶组件 -继承方式的高阶组件

  • 只继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react";

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


使用  Color(处理参数)(component)

怎么在高阶组件获取 ref

1
2
3
4
5
6
7
8
9
10
11
12
13
14
父组件
 <Ee getRef={(e) => {
   console.log(e)
 }} />

高阶组件
 <Component num={0} {...this.props} />
把props传给子组件

使用高阶的组件
    constructor(props: any) {
        super(props)
        props.getRef(this)
    }
1
2
babel-plugin-transform-decorators-legacy
@babel/plugin-proposal-decorators