内置宏

@lynx-js/react 编译插件会处理 __BACKGROUND__ 和 __MAIN_THREAD__ 等内置宏定义。在编译过程中，条件为 false 的代码块会被自动移除。

`BACKGROUND`

类型：boolean
作用：控制后台运行时环境下的代码执行。用于确定编译后需要保留在后台代码中的代码段。

使用示例

在函数式组件中使用

以下是 App 组件的示例：

import { noop } from 'lodash-es';
import { useEffect } from '@lynx-js/react';

function App() {
  const showToast = __BACKGROUND__
    ? () => {
        bridge.call('showToast', {
          message: t('toast'),
          icon: 'success',
        });
      }
    : noop;

  useEffect(showToast, []);
  return <view />;
}

编译后，代码将转换为：

后台线程代码（编译中间产物目录的 background.js）：

function App() {
  const showToast = () => {
    bridge.call('showToast', {
      message: t('toast'),
      icon: 'success',
    });
  };
  useEffect(showToast, []);
  return createSnapshotInstance(__snapshot_5ab440, null, []);
}

主线程代码（编译中间产物目录的 main-thread.js）：

function App() {
  const showToast = noop_default;

  useEffect();
  return createSnapshotInstance(__snapshot_5ab440, null, []);
}

在类组件中使用

以下是 Conversations 组件的示例：

import { AppLoggerFactory } from '../utils/appLoggerFactory';

class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
    if (__BACKGROUND__) {
      this.appLogger = AppLoggerFactory();
    }
  }
}

编译后，代码将转换为：

后台线程代码（编译中间产物目录的 background.js）：

class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
    this.appLogger = AppLoggerFactory();
  }
}

主线程代码（编译中间产物目录的 main-thread.js）：

class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
  }
}

`__MAIN_THREAD__`

类型：boolean
作用：控制主线程运行时环境下的代码执行。用于确定编译后需要保留在主线程代码中的代码段。

使用示例

在函数式组件中使用

以下是 App 组件的示例：

import { noop } from 'lodash-es';
import { useEffect } from '@lynx-js/react';

function App() {
  const showToast = !__MAIN_THREAD__
    ? () => {
        bridge.call('showToast', {
          message: t('toast'),
          icon: 'success',
        });
      }
    : noop;

  useEffect(showToast, []);
  return <view />;
}

编译后，代码将转换为：

后台线程代码（编译中间产物目录的 background.js）：

function App() {
  const showToast = () => {
    bridge.call('showToast', {
      message: t('toast'),
      icon: 'success',
    });
  };
  useEffect(showToast, []);
  return createSnapshotInstance(__snapshot_5ab440, null, []);
}

主线程代码（编译中间产物目录的 main-thread.js）：

function App() {
  const showToast = noop_default;

  useEffect();
  return createSnapshotInstance(__snapshot_5ab440, null, []);
}

在类组件中使用

以下是 Conversations 组件的示例：

import { AppLoggerFactory } from '../utils/appLoggerFactory';

class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
    if (!__MAIN_THREAD__) {
      this.appLogger = AppLoggerFactory();
    }
  }
}

编译后，代码将转换为：

后台线程代码（编译中间产物目录的 background.js）：

class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
    this.appLogger = AppLoggerFactory();
  }
}

主线程代码（编译中间产物目录的 main-thread.js）：

class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
  }
}

#内置宏

#__BACKGROUND__

#使用示例

#在函数式组件中使用

#在类组件中使用

#__MAIN_THREAD__

#使用示例

#在函数式组件中使用

#在类组件中使用

内置宏

`BACKGROUND`

使用示例

在函数式组件中使用

在类组件中使用

`__MAIN_THREAD__`

使用示例

在函数式组件中使用

在类组件中使用