React相关面试题

1. setState同步还是异步？

一般来说setState是异步的(能被react控制的function内)，但是在setTimeOut和DOM原生事件addEventListener中是同步的。

componentDidMount () {
        this.setState({ count: this.state.count + 1 })
        console.log(this.state.count) // 0
        this.setState({ count: this.state.count + 1 })
        console.log(this.state.count) // 0
        setTimeout(() => {
            this.setState({count: this.state.count + 1 })
            console.log(this.state.count) // 2
        }, 0)
        setTimeout(() => {
            this.setState({count: this.state.count + 1 })
            console.log(this.state.count) // 3
        }, 0)
        // setTimeout(function () {
        //     this.setState({count: this.state.count + 1 })
        //     console.log(this.state.count) // 报错，this 指向问题
        // }, 0)
              // 下面的setState是同步的
         document.body.addEventListener('click', () => {
            const count = this.state.count + 1
            this.setState({ count })
            console.log(this.state.count)
        })
    }

2.React中的异步组件

// 引入需要异步加载的组件
const LazyComponent = React.lazy(() => import('./lazyDemo') )
// 使用异步组件，异步组件加载中时，显示fallback中的内容
<React.Suspense fallback={<div>异步组件加载中</div>}>
    <LazyComponent />
</React.Suspense>