1.什么是虚拟dom？
他是一个js对象
React.createElement(
‘div‘，
{ className : ‘cn‘ }，
‘content 1’，
‘content 2’，
)；
浏览器编译后：
{
type:‘div‘,
props: {
className : ‘cn‘,
children: [
‘content 1’，
‘content 2’，
]
}
};
除了type和attribute以外的属性，原本是单独传进来的，转换之后，会以props中children数组形式打包传入。无论children作为数组还是参数列表传递都没关系 - 在生成虚拟dom的时候，最终都会打包在一起。
React使用===（triple equals）来比较type的值，所以这两个值需要是相同类或相同函数的相同实例。
值得注意的是，一个component的render（只有类组件在声明时有这个函数）跟ReactDom.render不是同一个函数。
想象一下，我们已经从1000行中删除了第一行。React不得不‘更新’剩余的999个子项，因为按index去对比的话，内容从第一条开始就已经不相同了。幸运的是，React有一个内置的方法（built-in）来解决这个问题。元素将根据key属性来比较，只要key是唯一，React就会移动元素，而不是将他它们从dom树中移除再将他们放回。（这个过程在react中叫mounting和unmounting）
原文地址：https://www.cnblogs.com/jiadaxiadedaimashenghuo/p/12419289.html
时间： 2024-11-13 09:50:22