search

yaofly2012 / note

Personal blog
https://github.com/yaofly2012/note/issues
44 stars 5 forks source link

Reactjs-API-DOM元素 #94

Open yaofly2012 opened 4 years ago

yaofly2012 commented 4 years ago

一、React DOM元素（vDOM）

As of React 16, any standard or custom DOM attributes are fully supported.

  1. vDOM是对应DOM的，不是直接对应HTML元素。

    二、vDOM属性的不同

    1. 属性名称以驼峰命名

    vDOM本质是JS，属性名称命名跟JS保持一致。有两个属性例外data-*，aria-*。

    2. 重命名的属性

    • htmlFor -> for
    • className -> class for，class在JS里都是关键词，不能直接使用。

      3. 增强功能的属性

    • onChange 跟DOM的onChange触发时机不同。
    • value input和textarea统一使用这个作为值。
    • style 以对象作为属性值，方便操作。
    • selected React里selected已经不是HTML那个selected了。 React 并不会使用 selected 属性，而是在根 select 标签上使用 value 属性。

4. 扩展的属性

Issues/Concern

  1. value（checked）和defaultValue（defaultCheck的）的不同？
yaofly2012 commented 3 years ago

TODO

虚拟DOM的实现原理和优劣对比 知乎 网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？ 知乎 如何理解虚拟DOM? 知乎 Vue采用虚拟DOM的目的是什么?

为啥需要？

  1. React官网首页这样写到

    Learn Once, Write Anywhere

虚拟DOM就好比中间语言，可用于实现跨平台。如SSR，ReactNative。

慢不慢？

存在两个vDom树。 diff算法： 如何降低时间复杂度的

如何理解“相比起 React，其他 MVVM 系框架比如 Angular, Knockout 以及 Vue、Avalon 采用的都是数据绑定”？

相比起 React，其他 MVVM 系框架比如 Angular, Knockout 以及 Vue、Avalon 采用的都是数据绑定：通过 Directive/Binding 对象，观察数据变化并保留对实际 DOM 元素的引用，当有数据变化时进行对应的操作。

比较性能的时候，要分清楚这些不同的场合：

  1. 初始渲染
  2. 小量数据更新
  3. 大量数据更新

Issues

  1. React如何识别是列表子元素的？