search

Izzimach / react-three-legacy

React bindings to create and control a 3D scene using three.js
Other
1.52k stars 128 forks source link

Use React Injection mechanism instead of monkey-patching #38

Open Izzimach opened 9 years ago

Izzimach commented 9 years ago

Right now there is some monkey-patching of React to replace DOM-specific code with THREE-specific code. However, React has certain "Injection" hooks that would do the same thing in a more appropriate manner. So the monkey-patch should be replaced by use of React injection.

The default React lib automagically applies some default injection via ReactDefaultInjection.js so the new code would have to bypass default React loading and provide injection similar to that of ReactDefaultInjection with certain parts replaced by react-three friendly code.

For future reference to myself for later:

For 0.15 the DOM stuff may get totally separated (it isn't in 0.14) so this will have to be re-visited, but by then hopefully it will be a little easier to manage.

poshaughnessy commented 9 years ago

I'm hoping to try to understand this better (especially as I'm giving another talk about React & Three.js tomorrow!). Please may I ask: how do other libraries handle this? Like react-art and react-canvas? Do they use the injection technique you described above?

Also: is the best place to learn more about this to look through the React source code, would you say?

Thanks!

Izzimach commented 9 years ago

AFAIK many libraries don't handle this. The bug this was meant to fix is pretty rare and only shows up if in very specific use cases. This bug originally came up when I used react-pixi with clojurescript. After fixing it in react-pixi I patched react-three the same way. In most cases you can probably get away without monkey patching.

Regarding injection you can look at react-blessed which does injection with 0.14. In fact, they had the same problem with replaceNodeWithMarkupByID that react-three had: https://github.com/Yomguithereal/react-blessed/issues/5

oveddan commented 8 years ago

Is this the reason the react dev tools don't work in the examples?

Izzimach commented 8 years ago

This isn't related to dev tool problems, no. In-browser React dev tools appear to assume that every React element is a DOM element and throw exceptions when they're not. I guess you would have to patch the dev tools to get them working perfectly with react-three.