#ctx.libs

ctx.libs 是 RunJS 内置库的统一命名空间，包含 React、Ant Design、dayjs、lodash 等常用库。无需 import 或异步加载，可直接通过 ctx.libs.xxx 使用。

#适用场景

#内置库一览

#顶层别名

为兼容历史代码，部分库同时暴露在顶层：ctx.React、ctx.ReactDOM、ctx.antd、ctx.dayjs。推荐统一使用 ctx.libs.xxx，便于维护与文档检索。

#懒加载

lodash、formula、math 等采用懒加载：首次访问 ctx.libs.lodash 时才发起动态 import，之后复用缓存。React、antd、dayjs、antdIcons 由上下文预置，访问即可用。

#示例

#React 与 Ant Design 渲染

const { Button, Card } = ctx.libs.antd;

ctx.render(
  <Card title="标题">
    <Button type="primary">点击</Button>
  </Card>
);

#使用 Hooks

const { React } = ctx.libs;
const { useState } = React;
const { Button } = ctx.libs.antd;

const App = () => {
  const [count, setCount] = useState(0);
  return <Button onClick={() => setCount((c) => c + 1)}>{count}</Button>;
};
ctx.render(<App />);

#使用图标

const { Button } = ctx.libs.antd;
const { UserOutlined, HeartOutlined } = ctx.libs.antdIcons;

ctx.render(<Button icon={<UserOutlined />}>用户</Button>);

#dayjs 日期处理

const now = ctx.libs.dayjs();
const formatted = now.format('YYYY-MM-DD HH:mm:ss');
ctx.message.info(formatted);

#lodash 工具函数

const user = { profile: { name: 'Alice' } };
const name = ctx.libs.lodash.get(user, 'profile.name', 'Unknown');

#formula 公式计算

const values = [1, 2, 3, 4];
const sum = ctx.libs.formula.SUM(values);
const avg = ctx.libs.formula.AVERAGE(values);

#math 数学表达式

const result = ctx.libs.math.evaluate('2 + 3 * 4');
// result === 14

#注意事项

• 与 ctx.importAsync 混用：若通过 ctx.importAsync('react@19') 加载了外部 React，JSX 会使用该实例；此时不要与 ctx.libs.antd 混用，antd 需与该 React 版本配套加载（如 ctx.importAsync('antd@5.x')、ctx.importAsync('@ant-design/icons@5.x')）。
• 多 React 实例：若出现 “Invalid hook call” 或 hook dispatcher 为 null，通常由多个 React 实例引起。在读取 ctx.libs.React 或调用 Hooks 前，先执行 await ctx.importAsync('react@版本') 确保与页面共用同一 React。

#相关

• ctx.importAsync() - 按需加载外部 ESM 模块（如指定版本的 React、Vue）
• ctx.render() - 渲染内容到容器