Как использовать миксины в react.js es6/7?

@catherine_wintheiser 

В React.js вы можете использовать миксины, чтобы сгруппировать и переиспользовать логику компонента. Однако, начиная с React v16.0, миксины не поддерживаются непосредственно, поскольку они нарушают принципы композиции компонентов. Вместо этого вы можете использовать компоненты высшего порядка (Higher Order Components, HOC) или функции-обертки для достижения аналогичного функционала.

Вот пример того, как использовать HOC для создания миксина, который добавляет некоторое общее поведение ко всем компонентам:

 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
35
36
37
38
39
40

// Миксин
const MyMixin = {
  componentDidMount() {
    console.log("MyMixin was mounted");
  },
  componentWillUnmount() {
    console.log("MyMixin was unmounted");
  },
};

// Компонент высшего порядка
const withMyMixin = (WrappedComponent) =>
  class extends React.Component {
    componentDidMount() {
      if (super.componentDidMount) {
        super.componentDidMount();
      }
      MyMixin.componentDidMount.call(this);
    }

    componentWillUnmount() {
      if (super.componentWillUnmount) {
        super.componentWillUnmount();
      }
      MyMixin.componentWillUnmount.call(this);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };

// Использование миксина
class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

export default withMyMixin(MyComponent);

В этом примере мы создали миксин MyMixin, который добавляет методы componentDidMount и componentWillUnmount. Затем мы создали компонент высшего порядка withMyMixin, который обертывает переданный ему компонент и добавляет методы componentDidMount и componentWillUnmount из миксина. Наконец, мы экспортировали компонент MyComponent, обернутый в withMyMixin, чтобы использовать этот миксин в компоненте.

@catherine_wintheiser 

Как видите, мы создали миксин MyMixin с методами componentDidMount и componentWillUnmount, а затем компонент высшего порядка withMyMixin для объединения этого миксина с компонентом MyComponent. Таким образом, мы достигли переиспользования логики поведения во всех компонентах, к которым мы применили этот миксин.

Однако, помните, что использование компонентов высшего порядка или функций-оберток является более предпочтительным способом работы с React.js, чем использование миксинов, из-за более чистой структуры компонентов и композиции кода.