#Механизм реактивности: Observable

В NocoBase 2.0 объекты реактивности Observable встречаются повсеместно. Они являются ядром базового потока данных и отзывчивости пользовательского интерфейса, широко применяясь в таких компонентах, как FlowContext, FlowModel и FlowStep.

#Почему стоит выбрать Observable?

NocoBase выбрал Observable вместо других решений для управления состоянием, таких как Redux, Recoil, Zustand и Jotai, по следующим основным причинам:

• Максимальная гибкость: Observable может сделать любой объект, массив, Map, Set и т.д. реактивным. Он изначально поддерживает глубокую вложенность и динамические структуры, что делает его очень подходящим для сложных бизнес-моделей.
• Невмешательство: Вы можете напрямую манипулировать исходным объектом, не определяя экшены (actions), редьюсеры (reducers) или дополнительные хранилища (stores), что обеспечивает превосходный опыт разработки.
• Автоматическое отслеживание зависимостей: Обернув компонент с помощью observer, он автоматически отслеживает используемые свойства Observable. При изменении данных пользовательский интерфейс обновляется автоматически, без необходимости ручного управления зависимостями.
• Применимость вне React: Механизм реактивности Observable применим не только в React, но также может быть объединен с другими фреймворками для удовлетворения более широкого спектра потребностей в реактивных данных.

#Зачем использовать observer?

observer отслеживает изменения в объектах Observable и автоматически запускает обновления React-компонентов при изменении данных. Это позволяет поддерживать синхронизацию вашего пользовательского интерфейса с данными, без необходимости вручную вызывать setState или другие методы обновления.

#Базовое использование

import React from 'react';
import { Input } from 'antd';
import { observer, observable } from '@nocobase/flow-engine';

const obs = observable.deep({
  value: 'aa'
});

const MyComponent = observer(() => {
  return (
    <div>
      <Input
        defaultValue={obs.value}
        onChange={(e) => {
          obs.value = e.target.value;
        }}
      />
      <div>{obs.value}</div>
    </div>
  );
});

export default MyComponent;

Для получения дополнительной информации о реактивном использовании, пожалуйста, обратитесь к документации @formily/reactive.