3 ms·

Isn't the way React handles the DOM perfectly to prevent layout-trashing? As far as I understand, the DOM in React is nearly write-only, so layout-trashing shou

by TN1ck 13y ago

Isn't the way React handles the DOM perfectly to prevent layout-trashing? As far as I understand, the DOM in React is nearly write-only, so layout-trashing should never occur, but I don't know the exact implementation details. Please correct me if this is not correct, I couldn't find any hard information on this.

masklinn 13y ago
> As far as I understand, the DOM in React is nearly write-only You can still read it if you need[0]. Theoretically, major layout invalidation should only be done in bulk during reconciliation, but I don't know when the rendering phase applies, and React also has component-local state. I know Om[1] only does rendering on requestAnimationFrame (so at once and synchronised with RAF) but that seems to be done by Om itself[2] and I can't find any clear documentation on that part for React. [0] although it may not be up to date if you're between a state change and a rendering [1] https://github.com/swannodette/om https://github.com/swannodette/om [2] https://github.com/swannodette/om/blob/master/src/om/core.cljs#L452 https://github.com/swannodette/om/blob/master/src/om/core.cl...
- grncdr 13y ago
  There is this React plugin/extension/whatever for using requestAnimationFrame with "plain React" https://npmjs.org/package/react-raf-batching https://npmjs.org/package/react-raf-batching But as you can see, the documentation is a bit sparse ;)
- spicyj 13y ago
  React is designed so that you should never need to read from the DOM except things like an input field's value. React specifically tries to never touch the DOM except when doing necessary mutations. If you're doing complicated layout code, then you will need to read from the DOM. Currently React doesn't have great support for managing layout from JS in a clean, efficient way but it's one of the things we're looking to add in the future.
  - masklinn 13y ago
    > React is designed so that you should never need to read from the DOM Oh absolutely, sorry if that was not clear. But sometimes you need to (e.g. to place an overlay or tooltip thing over an element), and AFAIK that remains possible.
    - spicyj 13y ago
      Correct.
spicyj 13y ago
This is correct. Unless you manually add code to touch the DOM in your component methods (which is rarely necessary), React only touches the DOM when it needs to mutate it and more or less does not read from it. For example, when mutating several parts of the DOM, React batches the element creation into a single innerHTML call because that's faster than converting many individual HTML strings into DOM nodes.

by TN1ck 13y ago

masklinn 13y ago

> As far as I understand, the DOM in React is nearly write-only You can still read it if you need[0]. Theoretically, major layout invalidation should only be done in bulk during reconciliation, but I don't know when the rendering phase applies, and React also has component-local state. I know Om[1] only does rendering on requestAnimationFrame (so at once and synchronised with RAF) but that seems to be done by Om itself[2] and I can't find any clear documentation on that part for React. [0] although it may not be up to date if you're between a state change and a rendering [1] https://github.com/swannodette/om https://github.com/swannodette/om [2] https://github.com/swannodette/om/blob/master/src/om/core.cljs#L452 https://github.com/swannodette/om/blob/master/src/om/core.cl...

grncdr 13y ago
There is this React plugin/extension/whatever for using requestAnimationFrame with "plain React" https://npmjs.org/package/react-raf-batching https://npmjs.org/package/react-raf-batching But as you can see, the documentation is a bit sparse ;)
spicyj 13y ago
React is designed so that you should never need to read from the DOM except things like an input field's value. React specifically tries to never touch the DOM except when doing necessary mutations. If you're doing complicated layout code, then you will need to read from the DOM. Currently React doesn't have great support for managing layout from JS in a clean, efficient way but it's one of the things we're looking to add in the future.
- masklinn 13y ago
  > React is designed so that you should never need to read from the DOM Oh absolutely, sorry if that was not clear. But sometimes you need to (e.g. to place an overlay or tooltip thing over an element), and AFAIK that remains possible.
  - spicyj 13y ago
    Correct.

spicyj 13y ago

This is correct. Unless you manually add code to touch the DOM in your component methods (which is rarely necessary), React only touches the DOM when it needs to mutate it and more or less does not read from it. For example, when mutating several parts of the DOM, React batches the element creation into a single innerHTML call because that's faster than converting many individual HTML strings into DOM nodes.