3 ms·
DOM is stateful, whereas the render() method is stateless. For instance, if you add a <button> to the DOM, it will stay there forever. On the other hand if the
by drcode 12y ago
DOM is stateful, whereas the render() method is stateless.
For instance, if you add a <button> to the DOM, it will stay there forever. On the other hand if the next call to render() no longer includes the <button> then React will do the work of removing it from the DOM.
- amelius 12y agoBut then render() has to re-generate all the stuff over and over again, which could be slow.
- drcode 12y agoRight, this is where you need to look at benchmarks http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/ http://swannodette.github.io/2013/12/17/the-future-of-javasc...
- TheCoelacanth 12y agoThere are two things that stop it from being slow in practice: 1. The virtual DOM that render deals with is several orders of magnitude faster than the real DOM, so you need to have thousands of elements before it starts taking longer than making the one change to the real DOM for the one element that changed 2. You can skip calling render on subcomponents that haven't changed, so while updating a list of 10000 elements where one has changed would require iterating through 10000 elements, updating a list of 100 elements that each contains 100 elements where one of the bottom level elements has changed would only require iterating through 200 elements.