react基础 - DOM的Diff算法 消息订阅-发布机制

DOM的Diff算法

虚拟DOM中的key的作用：

当状态中的数据发生改变时，react会根据【新数据】生成【新虚拟DOM】，随后react会进行【新虚拟DOM】和【旧虚拟DOM】的diff算法比较，具体的比较规则如下：

• 若【旧DOM】中找到了与【新DOM】相同的key，则会进一步判断两者的内容是否相同，如果也一样，则直接使用之前的真实DOM，如果内容不一样，则会生成新的真实DOM，替换掉原先的真实DOM
• 若【旧DOM】中没找到与【新DOM】相同的key，则直接生成新的真实DOM，然后渲染到页面

用index作为key可能引发的问题

若对数据进行：逆序添加、逆序删除等破坏顺序的操作时会产生不必要的真实DOM更新，造成效率低下
如果结构中还包含输入类的dom，会产生错误dom更新，出现界面异常
开发中如何选择key

最好选中标签的唯一标识id、手机号等
如果只是简单的展示数据，用index也是可以的
 

消息订阅-发布机制  ---兄弟组件间传递数据

工具库：PubSubJs

下载：

npm install pubsub-js --save

使用：

1. 先引入：

import PubSub from “pubsub-js”

2. 要接收数据方订阅：

PubSub.subscribe('消息名'，（data）=>{ console.log(data) })

3. 传递数据方发布：

PubSub.publish('消息名',data)