#Механізм реактивності: 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.