ReactLynx logoReactLynx logo
ReactLynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

react / built-in-macros

内置宏

@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,
    };
  }
}
除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。