记录下学习历程

标签：移动元素   比较   ===   class   one   reac   attr   name   内容   

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）

记录下学习历程

标签：移动元素   比较   ===   class   one   reac   attr   name   内容   

原文地址：https://www.cnblogs.com/jiadaxiadedaimashenghuo/p/12419289.html