DOM事件流

翻译已于 2024-01-12 12:10:09 修改 · 39 阅读

文章标签：

#前端 #javascript #html

于 2024-01-07 11:32:07 首次发布

本文解释了DOM标准的捕获+冒泡事件流模型，以及在React中如何影响组件状态更新的同步与异步行为，特别关注了通过`componentDidMount`和`setTimeout`引发的事件处理对`setState`的影响。

DOM标准采用捕获+冒泡。两个事件流都会触发DOM的所有对象，从window对象开始，同时window对象结束。

DOM 标准规定的事件流包括三个阶段：

事件捕获阶段
目标阶段
活动冒泡阶段

何时同步？何时异步？

如果是由 React 引发的事件处理（比如通过 onClick 引发的事件处理），调用 setState 不会同步更新 this.state，除此之外的 setState 调用会同步执行 this.state。所谓“除此之外”，指的是绕过 React 通过 addEventListener 直接添加的事件处理函数，还有通过 setTimeout/setInterval 产生的异步调用。而这一切都是因为一个非常核心的概念--事务

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }

  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};

答案是 0 0 2 3