首页 > 其他 > 详细

记录下学习历程

时间:2020-03-05 13:12:28      阅读:66      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!