# React面试题

# 1、setState什么时候同步，什么时候异步

由React控制的事件处理程序，以及生命周期函数调用setState不会同步更新state 。

React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，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); // 0
    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val); // 0
    setTimeout(() => {
      this.setState({ val: this.state.val + 1 });
      console.log(this.state.val); // 2
      this.setState({ val: this.state.val + 1 });
      console.log(this.state.val); // 3
    }, 0);
  }
  render() {
    return null;
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

原因：在React的setState函数实现中，会根据⼀个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，⽽isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有⼀个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，⽽当React在调⽤事件处理函数之前就会调⽤这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

# React面试题

# 1、setState什么时候同步，什么时候异步

# 2、React组件如何通讯？

# 3、JSX本质是什么？

# 4、context是什么？

# 5、shouldComponentUpdate的用途？

# 6、描述redux单向数据流