@lynx-js/react / global-events

#Global Events

ReactLynx provides a series of global events that allow developers to listen and respond to application-level state changes. You can easily subscribe to these events in your components using the useLynxGlobalEventListener hook.

#onGlobalPropsChanged

The onGlobalPropsChanged event is triggered when the lynx.__globalProps object changes, automatically re-rendering the entire page afterward. This is useful for components that need to react to global configuration changes, such as themes, languages, etc.

As a result, onGlobalPropsChanged is mainly used for handling side effects that are not directly related to UI rendering, such as data fetching.

The callback function for this event does not receive any arguments; you can read the latest state directly from lynx.__globalProps.

import { useLynxGlobalEventListener } from '@lynx-js/react';

function App() {
  useLynxGlobalEventListener('onGlobalPropsChanged', () => {
    console.log('Global props changed:', lynx.__globalProps);
    // You can perform data fetching or other operations here
  });

  return <view>...</view>;
}

#onDataChanged

The onDataChanged event is triggered when initData is updated by the client.

useInitData is a responsive hook that automatically triggers a component re-render when initData changes. The onDataChanged event is primarily used to handle side effects that are not directly related to UI rendering, such as logging, data analytics, or executing other imperative operations.

import { useLynxGlobalEventListener } from '@lynx-js/react';

function DataChangeLogger() {
  useLynxGlobalEventListener('onDataChanged', (data) => {
    console.log('initData changed:', data);
    // You can perform data reporting or other operations here
  });

  return <view>...</view>;
}