Comments (10)
https://github.com/crysalead-js/dom-layer/blob/master/src/node/tag.js#L205
from react-lite.
We can'nt attach dom node to vnode, consider this case:
const immutableElem = <div>statics element here</div>
ReactDOM.render(
<div>
{immutableElem}
{immutableElem}
{immutableElem}
</div>,
document.body
)
immutableElem should support multiple used, but immutableElem.element did'nt.
from react-lite.
I was looking into React. What about using getDOMNode to get the node from the vdom and then do replaceChild outside as you do now? That is how React seems to do it in one solution. The other they have it wrapped inside a object literal - ala your prototype for dangerous markup.
from react-lite.
@Lucifier129 Look at this. He also try follow React API as you do: https://github.com/dfilatov/vidom/blob/master/src/nodes/TagNode.js. There is also JSX plugin, and async mount.
He also unmount the children in the same way as you try to do. His trick is to use a getDomNode function. Found here: https://github.com/dfilatov/vidom/blob/master/src/nodes/TagNode.js#L49
from react-lite.
I am not sure the old solution replaceChild
really lost the performance?
But if we want to change, it's very easy, just use syntheticParentNode
syntheticParentNode = {
appendChild: noop
}
// at compareTwoTree
syntheticParentNode.namespaceURI = parentNode.namespaceURI
newNode = newVtree.init(syntheticParentNode, parentContext)
parentNode.replaceChild(newNode, node)
from react-lite.
The issue here is that this function as you have it now, can be read-only. So your latest solution seems to be a better one to avoid that.
I'm trying to study React solutions here now to give you correct replies. As you do it now, you throw away the whole tree if the keys are not identical. That is not how React does it.
React actually uses keyed for re-order and also diff non-keyed.
Everything is found here:
https://facebook.github.io/react/docs/reconciliation.html
This brings us to another question. Why do you have the replaceChild there in the first place? You should only replace the root node if nodeA and nodeB is different. As you checked for. See React docs.
from react-lite.
Actually it seems React handle this on the mount level. They have something like this ReactMount.getNode
and this node have a unique identifier so you can track it down.
This is the root node, and then do a comparison with new node and existing root node.
So React does this ReactMount.getNode(this._rootNodeID);
from react-lite.
Sorry about do not point out that react-lite has not re-order, it just replace nodes simply when two vnodes has different type or key .
from react-lite.
I see. An expensive operations. And this brings me back to the performance ticket regarding diff of children. But for two root nodes, React obviously does it different.
from react-lite.
the function replaceChild
was remove, use syntheticParentNode
instead
from react-lite.
Related Issues (20)
- Possible reasons react-lite results in ~2KB bundle size reduction? HOT 1
- Module not found: Error: Can't resolve 'react-dom/lib/HTMLDOMPropertyConfig' HOT 1
- Uncaught Error: must set key for <rc-animate> children
- history.push() inside componentWillReceiveProps breaks destroyVcomponent() HOT 3
- Cannot set property 'parentContext' of undefined HOT 9
- Strips out iOS `playsInline` attribute
- Audio event support
- Draft.js
- Cannot set property 'parentContext' of undefined HOT 2
- not an issue! I need a developper , website using react-lite with material-ui HOT 1
- react-lite doesn't throw errors if ReactLite is loaded twice on page HOT 2
- Recommendation: component RUM performance react-lite vs react HOT 1
- 菜单高亮只会初始化一次,之后的点击不会生效
- material-ui tabs won't work
- Not triggering click event the first time when used with material-ui HOT 2
- Select Value not selecting option HOT 7
- plans for react 16 compatible? HOT 3
- onClick handler triggered for disabled button
- Should I install fastclick by myself? HOT 3
- Uncaught InvalidStateError: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-lite.