记录下学习历程
Posted jiadaxiadedaimashenghuo
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了记录下学习历程相关的知识,希望对你有一定的参考价值。
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)
以上是关于记录下学习历程的主要内容,如果未能解决你的问题,请参考以下文章