用修飾器優雅的使用高階組件

修飾器

什麼是修飾器

一句話歸納：接受一個類做爲參數的函數，用來修改類的行爲。

參考阮一峯老師es6語法介紹

@testable
class MyTestableClass {
  // ...
}

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

MyTestableClass.isTestable // true

高階組件

什麼是高階組件

一句話歸納：接受一個組件做爲參數，返回一個組件的函數。

e.g.

// Target 是一個組件，它做爲參數傳給了Hoc這個函數
function Hoc(Target) {
  class Wrap extends Component {
    render() {
      return (
          <div className='wrap'>
            <Target />
          </div>
      );
    }
  }
  return Wrap;
}

使用高階組件

import Hoc from './Hoc';

class A extends Component {
  render() {
    return (
      <div>
          this is A
      </div>
    );
  }
}

export default Hoc(A); //在這裏調用一下Hoc

讓高階組件接受其餘參數

function Hoc(Target, className) {
  class Wrap extends Component {
    render() {
      return (
          <div className={className}>
            <Target />
          </div>
      );
    }
  }
  return Wrap;
}

//A.js
...
export default Hoc(A, 'wrap');

修飾器 + 高階組件

使用無參數的高階組件

import Hoc from './Hoc';

//這這裏@一下，A就會被當作參數傳給Hoc
@Hoc
class A extends Component {
  render() {
    return (
      <div>
          this is A
      </div>
    );
  }
}

export default A;

使用帶參數的高階組件

改寫一下修飾器

function Hoc(className) {
  //由於修飾器是一個只接受一個參數的函數，因此咱們返回一個函數出來，它纔是修飾器也是高階組件
  //至關於執行 Hoc(className) 返回出來的纔是修飾器
  return (Target) => {
    class Wrap extends Component {
      render() {
        return (
          <div className={className}>
          <Target />
          </div>
        );
      }
    }
    return Wrap;
  };
}

//A.js
@Hoc('wrap')
class A extends Component {
  render() {
    return (
      <div>
          this is A
      </div>
    );
  }
}

export default A;

//等同於
class A extends Component {
  render() {
    return (
      <div>
          this is A
      </div>
    );
  }
}

export default Hoc('wrap')(A);

到這裏不知道小夥伴們看懂了沒有。

總結

咱們一般使用Hoc來作一些公共的邏輯，或者向子組件注入一些屬性，結合上修飾器，咱們能夠讓語法更加簡潔，維護起來更加方便。