ArenaPro Creator

Appearance

TypeScript 类型定义 ​

在使用 TypeScript 时，我们可以为组件属性定义类型：

tsx
interface BoxProps {
  style?: {
    position?: { offset: Vec2 };
    size?: { offset: Vec2 };
  };
  children?: any;
}

function Box({ style, children }: BoxProps) {
  return <box style={style}>{children}</box>;
}

条件渲染 ​

除了三元运算符，我们还可以使用以下方式实现条件渲染：

1. 逻辑与运算符 ​

tsx
<box>{isLoggedIn && <text>欢迎回来</text>}</box>

2. 条件函数 ​

tsx
function renderContent(isLoading: boolean) {
  if (isLoading) {
    return <text>加载中...</text>;
  }
  return <text>内容已加载</text>;
}

<box>{renderContent(isLoading)}</box>;

列表渲染 ​

使用 map 函数渲染列表时，需要注意以下几点：

tsx
const items = [
  { id: 1, name: "项目1" },
  { id: 2, name: "项目2" },
  { id: 3, name: "项目3" },
];

<box>
  {items.map((item) => (
    <text
      style={{ position: { offset: Vec2.create({ x: 0, y: item.id * 30 }) } }}
    >
      {item.name}
    </text>
  ))}
</box>;

效果：

性能优化建议 ​

  1. 避免不必要的重渲染

    • 使用 React.memo 包装纯展示组件
    • 合理使用 useMemo 和 useCallback

  2. 样式优化

    • 将静态样式抽离为常量

  3. 事件处理优化

    • 避免在渲染时创建新的函数
    • 使用 useCallback 缓存事件处理函数

  4. 列表渲染优化

    • 使用虚拟列表处理大量数据
    • 实现 shouldComponentUpdate 或使用 React.memo

最佳实践 ​

  1. 类型定义位置

    • 将类型定义放在单独的类型文件中
    • 使用 type 或 interface 根据具体情况选择
    • 优先使用 interface 进行扩展

  2. 类型命名

    • 使用 PascalCase 命名类型
    • 使用有意义的类型名称
    • 避免使用过于通用的类型名称

  3. 类型复用

    • 抽取公共类型到共享文件
    • 使用类型工具减少重复代码
    • 合理使用类型别名

  4. 类型安全

    • 使用严格的类型检查
    • 避免使用 any 类型
    • 使用类型守卫确保类型安全

  5. 性能考虑

    • 避免过深的类型嵌套
    • 使用类型工具优化复杂类型
    • 注意类型推断的性能影响