事件对象常见应用有什么?

• 事件目标
  • 触发事件的要素
• 事件.currentTarget
  • 绑定事件的要素
• event.preventDefault()
  • 阻止违约行为
  • event.cancelBubble()和 event.preventBubble 都已经荒废
• event.stopPropagation()
  • 阻止在核心阶段或冒泡阶段继续传播，是阻止冒泡
• event.stopImmediatePropagation()
  • 阻止事件冒泡并阻止相同事件的其他侦听器被调用。

异步更新

考虑到性能问题，setState 使用一个队列机制来更新 state。 当执行 setState 时，会将需要更新的 state浅合并后放入状态队列，不会立即更新 state。而如果不使用 setState，而直接修改 state 的值就不会放入状态队列，下一次调用 setState 对状态队列进行更新的时候可能会造成不可预知的错误。

例子：

// 假设 state.count === 0
this.setState({ count: state.count + 1 });
this.setState({ count: state.count + 1 });
this.setState({ count: state.count + 1 });
// state.count === 1, 而不是 3

本质上等同于：

// 假设 state.count === 0
Object.assign(
  state,
  { count: state.count + 1 },
  { count: state.count + 1 },
  { count: state.count + 1 }
);
// {count: 1}

解决方法为： 传递一个签名为 (state, props) => newState 的函数作为参数。 向 setState 中传入函数时，这个函数不会被浅合并，一定会执行，是一个原子性更新操作。

// 正确用法
this.setState((prevState, props) => ({
  count: prevState.count + props.increment,
}));