[突发奇想] react cocos

能做到就是意义

个人之前做过原型,原理上是可以的。

和React.Native比较类似,需要实现:

  1. React reconciler接口
  2. 原生/Web实现Shadow DOM,描述整个树状结构
  3. 实现各个控件的功能,比如View、Text、接入yoga排版等。
  4. 全部的绘制和html无关,由引擎接管。
  5. 在脚本里加入jsx代码:

    编译成js:

    从ReactNode构建Shadow DOM:
  6. 添加到管线进行渲染:
    image

问题出在哪里:

  • 有大量控件需要支持,比如Scroll View等。整体逻辑和cc.Component不太一样,代码可能没法复用。
  • 和其他模块交互需要设计,比如动画、特效、模型等。未知领域,需要探索。
  • 原则上Shadow DOM每帧都要更新,性能可能有问题。
  • 包体增加:React + Reconciler + Shadow DOM + Layout + Renderer。
  • 和cc.Component相比,看起来受益并不大。只有写类似html的界面会比较方便,但显然游戏界面复合了大量的图片、动画、特效,不以文字为主。

所以个人结论是落地有些困难,单纯实现是没问题的。

是个不错的点子,希望能够整理为插件上架 Cocos Store

是个不错的点子,希望能够整理为插件上架 Cocos Store

点子不错。但是先做其他优先级更高的把。性能就能把这个卡的死死的

我倒是想搞个实现了,可最后使用的时候不是最好还是在 cocos 的项目里面吗,在 cocos 项目下要怎么开 jsx tsx 这些选项呢?

这块我不是很熟。直接改项目里的tsconfig.json不行吗?
compilerOptions下面加"jsx": "react",

因为 tsconfig 没有开放这些选项,加上 “jsx”: “react” 后在编辑器里面还是会报错的
如果直接写在 ts 文件里面


单独放在 tsx 文件之后

加上 “allowImportingTsExtensions”: true 之后

只有编辑器里没什么问题,不过跑不起来也没用

或许可以通过这个来实现,我尝试一下
https://github.com/developit/htm

这也是不是就可以用cocos写小程序了。

是用类 react 的方式写 cocos
原本 cocos 在哪里还是只能在那里用

换了低版本的 React18 之后终于跑起来了

也算是变相实现了在 cocos 里面写 jsx

Kapture 2025-06-15 at 23.23.00


稍复杂一点的 demo

up,这个是要先学react相关然后再学cocos相关,然后才能用吗?感觉这样做游戏更麻烦了

这就不是做游戏一般做那种应用内嵌套很多游戏的社交应用

这个只是技术验证,并不是可以拿来做游戏的东西,将来应该也不太能直接拿来做游戏。

哈哈哈,邪修 :joy:


调整了节点和组件的组织方式

你这玩意搁以前,那是要被围攻光明顶的