React context API vs mobX?

Question

[yankoyski]

Какие преимущества у mobX, в сравнении с React context API?

Comments

[askhat]

Их нельзя сравнивать

[yankoyski]

Асхат Бикметов, Почему? React Context только для передачи данных вниз по древу? Их нельзя изменить в каком-нибудь компоненте? Если можно, то компоненты, которые эти данные получают - обновятся? Если да, то в чём разница?

Answer 1

[Антон Спирин]

MobX - библиотека для управления состоянием приложения.
React Context API - интерфейс для передачи данных вниз по древу компонентов.

Какие преимущества у mobX, в сравнении с React context API

Преимуществ нет, так как у инструментов разные задачи.

Comments

[yankoyski]

React Context только для передачи данных вниз по древу? Их нельзя изменить в каком-нибудь компоненте? Если да, то компоненты, которые эти данные получают - обновятся?

[Антон Спирин]

yankoyski, можно передавать в контекст состояние какого-либо родительского компонента и колбек на изменение этого состояния:

export const CounterContext = React.createContext({
  counter: 0,
  increment: () => {},
});

import React from 'react';
import { CounterContext } from './context';

class Parent extends React.Component {
  increment = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  };

  state = {
    counter: 0,
    increment: this.increment,    
  };

  render() {
     return (
       <CounterContext.Provider value={this.state}>
         {/* ... */}
       </CounterContext.Provider>
     );
  }
}

import React from 'react';
import { CounterContext } from './context';

class SomeDeepChild extends React.Component {
  static contextType = CounterContext;

  render() {
    const { counter, increment } = this.context;
 
    return (
      <div>
        <h1>Counter value: {counter}</h1>
        <button onClick={increment}>increment</button>
      </div>
    );
  }
}

Обновление древа будет происходить за счет обновления компонента Parent и контекст при обновлении будет получать новые значения.
Но этот способ пригоден для единичных случаев. вроде переключения темы или языка. Для управления состоянием приложения следует использовать предназначенные для этого инструменты. Они более гибкие и удобные в использовании.

[yankoyski]

Антон Спирин, Понял, спасибо!

Answer 2

[askhat]

Mobx это реализация паттерна Observable, и ещё пара полезных функций. Если использовать Mobx можно отказаться реактовских setState и useState. Это полезно для того чтобы отделить модель от представления.

React Context это реакт специфичная реализация Dependency Injection. Используя этот api вы можете передать компонентам заранее определённый объект в контекст (так будто этот объект был в аргументах [пропсах] компонента). В контексте может быть что угодно даже декорированный Mobx объект — стор.

Говоря о Dependency Injection следует упомянуть Компоненты Высшего Порядка (HOC). Они выполняют ту же задачу — внедряют объект в область видимости функции. Однако в отличии от Context api используют прозрачный механизм каррирования.