[突发奇想] react cocos

Creator 3.x
#1

最近突发奇想，或许可以像 react native 一样来写 cocos。

具体实现的话，就是参考这些
react-reconciler
awesome-react-renderer
然后就可以这样

    ReactCocos.render(this.node, (
      <View id="rootView">
        <Text id="label">Hello</Text>
        <View id="view" />
      </View>
    ))

可惜最大的阻碍就是 tsconfig 配置不够开放不能开 jsx，不然理论上是能够跑起来的，这样至少可以有一个 poc 的玩具了。

有没有感兴趣的或者已经这么干过的人啊

或者官方什么时候能开这个口子啊

:face_with_monocle:

#2

这是两套系统，而且入口是一个canvas就行了。

#3

以前用过一个叫Flipboard的新闻客户端就是使用Canvas来渲染Dom
仓库地址：react-canvas

等这套方案发扬光大，我们可以自定义一套XML来描述页面信息，然后设计一套样式语言用来描述UI样式，再配合js脚本，岂不是实现了一套超级牛逼的渲染方案？再给这套XML规范起个名字叫CANVAS-HTML，然后给这套样式语言起个名字叫CANVAS-CSS，我们就得到了基于Canvas的全新浏览器渲染引擎，岂不美哉？

#4

原生咋办 在打包的时候 转换出来?

#5

react 一般前端开发者使用的时候是通过 react-dom 将 jsx 所描述的节点树应用到 dom 上去

如果像是上面我描述的实现方式的话，就会和 react-native 这些是一样的，只不过操作的不是 dom 树，而是 cocos 的节点树了。

#6

甚至我觉得都不一定要挂在 canvas 下，canvas camera 这些也可以做成 react 组件写在 jsx 里面

#7

canvas 上的实现现在也还有很多啊，比如 https://github.com/konvajs/react-konva
所以这不是想要在 cocos 上来实现嘛，这么好玩的玩具够玩好久了

#8

意义是啥，真要搞的话， 你搞个react-pixi 那不是容易的多

#9

能做到就是意义

#10

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

和React.Native比较类似，需要实现：

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

    编译成js：
    image
    image931×293 36.3 KB

    从ReactNode构建Shadow DOM：
    image
    image1225×742 78.3 KB
  6. 添加到管线进行渲染：
    image

问题出在哪里：

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

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

#11

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

#12

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

#13

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

#14

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

#15

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

#16

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

image
image796×398 15.6 KB

image
image1806×484 57.2 KB

单独放在 tsx 文件之后

image
image1684×156 39.8 KB

加上 “allowImportingTsExtensions”: true 之后

image
image1828×470 42.7 KB

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

image
image876×396 17.7 KB

#17

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

#18

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

#19

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

#20

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

image
image3694×1276 1.22 MB