- 事件目标
- 触发事件的要素
- 事件.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, }));