react 学习(四) 批量更新及合成事件

我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 react 自身的逻辑不符。本小节我们学习下数据的批量更新和 react 中的事件处理。

批量更新

回顾

上一节我们并行执行两个 setState 方法，从下图可知，两个函数同时执行了：

handleClick = () => {
  this.setState({
    number: this.state.number + 1,
  });
  this.setState({
    number: this.state.number + 1,
  });
};

其实对于完全两个一样的方法，我们可以过滤掉，只执行最后一次的操作。那如何批量处理呢？那就是用栈先存起来，用一个状态记录，看是存储还是执行更新。

实现批量存储

这里我们定义一个对像，记录字段如下：

当前是存储还是执行的状态
存储的栈
批量更新的方法

export const updateQueue = {
  isBatchingUpdate: false, // 是否是批量更新，true 要批量更新我们就存，false 我们就执行
  updaters: new Set(), // 当前更新队列中保存的所有的 updaters 实例，每个 updater 实例对应一个组件
  batchUpdate() {
    updateQueue.isBatchingUpdate = false; // 要执行了我们还原为 false，为下次再执行重新初始化
    // 批量更新
    for (const updater of updateQueue.updaters) {
      updater.updateComponent();  // 每个组件有自己的更新方法
    }
    updateQueue.updaters.clear(); // 执行完后清空
  },
};

我们在添加状态的时候，会触发更新方法 emitUpdate，我们在这里进行状态判断：

emitUpdate() {
  // 是批量更新状态  就添加
  if (updateQueue.isBatchingUpdate) {
    // 如果批量更新模式，只添加updater
    updateQueue.updaters.add(this); // this 就是每个组件的更新器 updater
  } else {
    // 更新组件
    this.updateComponent();
  }
}

那什么时候我们把状态设为批量存储呢？就是在我们点击操作的时候

handleClick = () => {
  updateQueue.isBatchingUpdate = true;
  // 为了提高性能，减少更新次数，可以吧一个事件函数中的更新操作进行合并
  this.setState({
    number: this.state.number + 1,
  });
  this.setState({
    number: this.state.number + 1,
  });
  updateQueue.batchUpdate();
};

可以看到，我们只执行了了一次状态修改逻辑，打印上面的 updaters 栈，里面也就一个值，实现了重复的过滤，初步达到了我们的效果。但是这里又引出另一个问题，我们不可能把状态更新的逻辑写在我们自己的业务代码里，这就引出了 react 中的事件机制。

事件合成

相信大家在自信学习或者看文章中也有所了解，react 利用冒泡机制把事件都放到了 document 上，对不同浏览器兼容做了处理。而我们在上面写的批量处理状态和我们自定义的事件函数也是在合成事件中做的处理。

好处

引出了合成事件，更新时候自动调用
兼容性处理，不标准的浏览器实现。变成标准

实现

像我们刚说的，不能把事件绑定在 dom 上，我们要修改一下属性的逻辑

// src/react-dom.js
...
if (/^on[A-Z].*/.test(key)) {
  addEvent(dom, key.toLowerCase(), newProps[key])
}

// src/event.js

/**
 * 合成事件，合成事件调用用户自己写的 函数
 * @param {*} dom dom
 * @param {*} eventType onclick
 * @param {*} handler 用户自己写的函数
 */
function addEvent(dom, eventType, handler) {
  const store = dom._store_ || (dom._store_ = {}) // 这里我们在 dom 上自己添加了对象，存储我们的函数，有个绑定关系如果担心这个变量名会冲突，可以自定义 symbol
  
  store[eventType] = handler
  if (!document[eventType]) {
    // 把事件绑定到 docuemnt 文档上   document.onclick = dispatchEvent
    document[eventType] = dispatchEvent // 事件委托  在这个函数中处理 状态 冒泡等逻辑
  }
}

委托函数，处理批量存储逻辑更新

function dispatchEvent(event) {
  // 这里的 type 没有 on 前缀
  const {type, target} = event // 就是我们写的 e，从原生的事件对象上获取 事件类型，target 对象
  const eventType = `on${Type}`
  
  updateQueue.isBatchingUpdate = true // 在这里修改状态
  
  const {_store_} = target
  const handler = _store_ && _store_[eventType]
  handler && handler() // 执行用户自己写的事件函数
  
  updateQueue.batchUpdate()
}

从上面看我们大体的批量处理逻辑就完事了，但是由于 react 是借用的事件冒泡处理的合成事件。如果我们真的想在自己的代码中处理事件冒泡呢，如果所有的事件都绑定到了 document 上，那就没有所谓的冒泡了，父子都写了事件也就不会依次执行，所以我们要对合成事件进行模拟事件冒泡处理。

模拟事件冒泡

我们虽然写的事件是使用的代理，但是我们的 dom，都是浏览器中的真实 dom，如果要实现冒泡，我们可以获取当前点击的元素即 target，然后获取他的 parentNode，然后我们再执行父的方法，我们就模拟出了冒泡，修改 diapctchEvent 方法：

// 我们代理下原生的事件对象 event
let syntheticEvent = createSyntheticEvent(event)
let currentTarget = target
// 这里重点
while(currnetTarget) {
  // target 点谁就是谁，currentTarget 事件发生的元素
  let {_store_} = currentTarget // 通过 target 找到事件源
  const handler = _store && _store_[eventtype]
  // handler 里拿到的 e 不是浏览器原生的 event，而是我们自己合成的对像，所以有时候你需要使用e.presist拿到target对象，就是因为内部做了处理
  handler && handler(syntheticEvent)
  if (syntheticEvent.isPropagetionStopped) break // 如果用户自己写了组织冒泡 执行退出
  
  currentTarget = currentTarget.parentNode // 模拟冒泡，一层一层找 父，这样就可以依次执行事件
}
...

定义代理事件对象

function createSyntheticEvent(nativeEvent) {
  let syntheticEvent = {} // 从新定义对象
  for(const key in nativeEvnet) {
    let value = nativeEvent[key]
     if(typeof value === 'function') {
       // 如果值是函数的话，指定 this 不变
       value = value.bind(nativeEvent)
     }
     syntheticEvent[key] = value
  }
  
  syntheticEvent.nativeEvent = nativeEvent // 绑定关系
  syntheticEvent.isPropagationStopped = false // 是否阻止冒泡
  syntheticEvent.isDefaultPrevented = false // 是否阻止默认事件
  syntheticEvent.preventDefault = preventDefault // 处理阻止默认事件
  syntheticEvent.stopPropagation = stopPropagation
  return syntheticEvent
}


//// 处理兼容
function preventDefault() {
  this.isDefaultPrevented = true;
  let event = this.nativeEvent;
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}
function stopPropagation() {
  this.isPropagationStopped = true;
  let event = this.nativeEvent;
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = false;
  }
}

到这里我们基本完成了 react 的事件机制，写个 demo 验证下

// src/index.js
...
handleClick = (e) => {
  console.log(1);
  // e.stopPropagation();
};
handleClick1 = () => {
  console.log(222);
};
render() {
  return (
    <div onClick={this.handleClick1}>
      <button onClick={this.handleClick}>plus</button>
    </div>
  );
}

我们打开注视，使用禁止冒泡验证下：

我们学习了解了 react 中的批量更新机制和事件合成方式，下一节我们继续学习下 react 中的 ref 实现原理。如果有不对，欢迎指正！

原文地址：https://cloud.tencent.com/developer/article/1978209

react 学习(四) 批量更新及合成事件

批量更新

回顾

实现批量存储

事件合成

好处

实现

模拟事件冒泡

相关推荐