Skip to main content

介绍 PixiJS React v8

· 7 min read
Trezy
Trezy
Pixi React Maintainer

等待结束了！我们很高兴地宣布发布 PixiJS React v8，这是对 React 和 PixiJS 协作方式的彻底重塑。此更新代表了在 React 应用中构建交互式图形方式的重大转变。

🌐 The wait is over! We're thrilled to announce the release of PixiJS React v8, a complete reimagining of how React and PixiJS work together. This update represents a major shift in how you'll build interactive graphics in React applications.

从零开始构建，以利用 PixiJS v8 的强大功能，并专为 React 19 设计，这个新的重要版本为 PixiJS React 生态系统带来了前所未有的灵活性、性能和开发者体验。

🌐 Built from the ground up to harness the power of PixiJS v8 and designed exclusively for React 19, this new major version brings unprecedented flexibility, performance, and developer experience to the PixiJS React ecosystem.

一个新的开始​

🌐 A Fresh Start

决定完全重建 @pixi/react 是由几个关键因素推动的：

🌐 The decision to completely rebuild @pixi/react was driven by several key factors:

  • PixiJS v8 本身经历了重大重写，无论如何，这都会需要对 PixiJS React v7 代码库进行大幅重构
  • 更新到支持 React 19 所需的最新版本的 react-reconciler 会破坏大部分现有的实现
  • 一个全新的开始让我们有机会重新构想库的人机工程学，从而实现新的 pragma，并取消以前版本的封装组件，转而通过 JSX 代理直接公开 PixiJS 组件

这个完整的重写受到了@react-three/fiber的重大启发，没有R3F维护者和社区的宝贵贡献，这是不可能实现的。

🌐 This complete rewrite is heavily inspired by @react-three/fiber, and would not have been possible without the significant contributions from the R3F maintainers and community.

有什么新鲜事？​

🌐 What's New?

自定义指令​

🌐 Custom Pragma

PixiJS React v8 的核心是一个新的 JSX 标记，它极大地简化了使用该库的操作方式。现在，所有 PixiJS 组件都直接作为带有 pixi 前缀的 JSX 组件呈现：

🌐 At the heart of PixiJS React v8 lies a new JSX pragma that greatly simplifies the ergonomics of using the library. Now, all PixiJS components are directly reflected as JSX components with the pixi prefix:

import { Application } from '@pixi/react';
import { Sprite } from 'pixi.js';

function MyComponent() {
  const draw = useCallback((graphics) => {
    graphics.setFillStyle({ color: 'red' });
    graphics.rect(0, 0, 25, 25);
  }, []);

  const texture = useMemo(() => Assets.get('bunny.png'), []);

  return (
    <Application>
      <pixiSprite x={100} y={100} texture={texture} />
      <pixiGraphics
        x={0}
        y={0}
        draw={(graphics) => {
          graphics.setFillStyle({ color: 'red' });
          graphics.rect(0, 0, 25, 25);
        }}
      />
    </Application>
  );
}

这种方法消除了对自定义组件封装器的需求，使库更加面向未来且更易于维护。随着 PixiJS 的发展，@pixi/react 将自动支持新组件，而无需更新库本身。

🌐 This approach eliminates the need for custom component wrappers, making the library much more future-proof and easier to maintain. As PixiJS evolves, @pixi/react will automatically support new components without requiring updates to the library itself.

完整的 TypeScript 支持​

🌐 Full TypeScript Support

PixiJS React v8 从头开始使用 TypeScript 重建，提供自动补齐、类型检查，即使对于不使用 TypeScript 的开发者也能改善开发体验。

🌐 PixiJS React v8 was rebuilt from the ground up with TypeScript, providing autocompletion, type checking, and an improved developer experience even for those that aren't using Typescript.

兼容 PixiJS v8​

🌐 PixiJS v8 Compatible

专为 PixiJS v8 构建，此版本将核心库中的所有性能改进、WebGPU 支持以及现代 JavaScript 功能直接带到你的 React 应用中。

🌐 Built specifically for PixiJS v8, this release brings all the performance improvements, WebGPU support, and modern JavaScript features from the core library directly to your React applications.

支持 React 19​

🌐 React 19 Support

React 19 代表了 React 在底层工作方式上的巨大变化，这意味着与 React 深度集成的库必须跟随这一变化。虽然我们认识到这给我们的 React 18 用户的升级路径带来了重大障碍，但我们相信能够利用最新的 React 功能和优化是值得付出的努力。

🌐 React 19 represents a massive shift in the way React works under-the-hood, which means that libraries that are deeply integrated with React have to follow suit. While we recognize that this places significant hurdles in the upgrade path for our React 18 users, we believe that being able to take advantage of the latest React features and optimizations is worth the effort.

入门​

🌐 Getting Started

准备好开始了吗？查看 新的文档网站 了解 PixiJS React v8！

🌐 Ready to dive in? Check out the new docs site for PixiJS React v8!

想更快开始吗？使用 PixiJS Create CLI 在几秒钟内启动一个 PixiJS React 项目：

🌐 Want to get started even faster? Use the PixiJS Create CLI spin up a PixiJS React project in seconds:

npm create pixi.js@latest --template framework-react

这将建立一个包含所有必要组件的现成项目，因此你可以直接开始构建。

🌐 This sets up a ready-made project with all the essentials, so you can jump straight into building.

接下来是什么？​

🌐 What's Next?

虽然这个初始版本带来了巨大的改进，但我们才刚刚开始。我们计划推出：

🌐 While this initial release brings tremendous improvements, we're just getting started. We have plans to introduce:

  • 一个 attach API（灵感来自 R3F 的 attach），用于自动将非直接渲染的组件（如滤镜和纹理）连接到其父组件
  • 支持从普通 JSX 文本节点创建 Text 组件
  • 与 PixiJS Create 的集成

我们的目标是使库尽可能直观，大多数 API 都由核心 PixiJS 文档提供。

🌐 Our goal is to make the library as intuitive as possible, with most APIs being served by the core PixiJS documentation.

加入社区​

🌐 Join the Community

我们非常希望听到你的反馈，并看看你使用 PixiJS React v8 构建了什么！加入我们的 官方 PixiJS Discord，分享你的经验、提出问题，并与其他开发者交流。

🌐 We'd love to hear your feedback and see what you build with PixiJS React v8! Join us on the Official PixiJS Discord to share your experiences, ask questions, and connect with other developers.

衷心感谢所有为此次发布做出贡献的人，尤其是那些提供早期反馈和测试的人。你们的意见对于塑造下一代 PixiJS React 非常宝贵。

🌐 A heartfelt thank you to everyone who contributed to this release, especially those who provided early feedback and testing. Your input has been so valuable in shaping this next generation of PixiJS React.