修饰器&高阶组件

Posted 2021-01-31 alisadream

一、修饰器

1、类的修饰

修饰器是一个函数，用来修改类的行为

function testable(target) {
  target.isTestable = true;
}

@testable
class MyTestableClass {
  // ...
}

MyTestableClass.isTestable // true

注意：

修饰器函数的第一个参数，就是所要修饰的目标类

如果有多余参数，只能修饰器外面封装一层函数

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
  }
}

@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

@testable(false)
class MyClass {}
MyClass.isTestable // false

2、方法的修饰

例如:

@bind

修饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。

二、高阶组件

高阶函数：接受函数作为输入，输出一个新的函数
高阶组件：接受react组件作为输入，输出一个新的react组件
通俗讲：在普通组件外面包一层逻辑，就是高阶组件
将功能相同或者相似的代码提取出来封装成一个可公用的函数或者对象

import React from ‘react‘;

export default function withHeader(WrappedComponent) {
  return class HOC extends React.Component {
    static displayName = `HOC(${WrappedComponent.displayName || WrappedComponent.name})`

    state = {}

    render() {
      return (
        <div>
          <div className="demo-header">
            我是标题
          </div>
          <WrappedComponent {...this.props} />
        </div>
      );
    }
  };
}

 

import React from ‘react‘;
import withHeader from ‘../decorator‘;

@withHeader
export default class Demo extends React.Component {
  render() {
    return (
      <div>
        我是一个普通组件
      </div>
    );
  }
}

父组件和高阶组件区别：
高阶组件：可以封装公共逻辑，给当前组件传递方法属性，添加生命周期钩子，改善目前代码里业务逻辑和UI逻辑混杂在一起的现状
父组件：UI层的一些抽离