React面试题

1.什么是错误边界

错误边界是一种react组件，可以捕获并打印发生在其子组件树任何位置的JavaScript错误，并会渲染出备用UI。

作用：防止子组件的错误导致整个组件树被卸载

错误边界无法捕获以下场景产生的错误：
1.事件处理
异步代码（setTimeout或者requsetAnimationFrame）
服务端渲染
它自身抛出来的错误

使用：
如果类组件中使用了static getDerivedStateFromError() 或者 componentDidCatch() 这两个生命周期方法中的任意一个(或两个）时，那么他就变成了一个错误边界。
static getDerivedStateFromError() 渲染备用UI，使用componentDidCatch() 打印错误信息。

2.react组件通信

1.父传子，父组件的传递值给子组件，子组件通过props接收
2.子传父，父组件传递函数给子组件，子组件将所要传递的值作为参数传递给父组件
3.如果是同级别之间，可以使用redux进行状态管理

3.父组件如何使用子组件的方法

1.可以设置ref获取子组件的实例，然后调用子组件的方法

4.setState是同步还是异步

setState()会进行批处理，合并策略

setState批量更新：
除了虚拟dom的优化，减少数据更新的频率是另外一种手段，也就是React的批量更新。

setState()批量更新的原理，react内部的隐式操作，会有一个布尔值canMerge判断这些操作是否可以合并，如果可以都将其放入一个finalState，直到不能合并canMerge为false，最好将finalState进行合并。

如何控制canMerge逻辑

关键点在于React是否有时机执行canMerge逻辑，也就是React对目标函数有没有控制权。如果没有控制权，那么就不会执行canMerge逻辑，也就不会发生setState()被react隐式合并了

可以通过：Promsie.then(),fetch回调，xhr网络回调、setTimout

通过unstable_batchedUpdates重回react的控制

import React from 'react'
import { unstable_batchedUpdates as batchedUpdates } from 'react-dom'

export default class BatchedDemo extends React.Component {
    state = {
        number: 0,
    }

    handleClick = () => {

        this.setState({
            number: this.state.number + 1
        })
        this.setState({
            number: this.state.number + 2
        })
        this.setState({
            number: this.state.number + 3
        })

        setTimeout(() => {
            //通过这个api，让react拿回控制权，执行canMerge逻辑
            batchedUpdates(() => {
                this.setState({
                    number: this.state.number + 4
                })
                this.setState({
                    number: this.state.number + 5
                })
                this.setState({
                    number: this.state.number + 6
                })
            })

        })

    }

    render() {
        return <button id="myButton" onClick={this.handleClick}>Num:
        {this.state.number}
        </button>
    }
}

setState本身是同步的，导致setState异步的原因是因为走了React内部的合并逻辑，那只要绕过react内部的合并逻辑，不让它进入react的合并逻辑。

总结

：
异步的情况：
由React控制的事件处理函数，以及生命周期函数调用setState时表现为异步 。大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等（合成事件中），这些事件处理函数中的setState都是异步处理的。

同步的情况：
React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，setTimeout/setInterval，ajax，promise.then内等 React 无法掌控的 APIs情况下，setState是同步更新state的

setState可以传入一个对象，也可以传入一个函数。

传入对象时：
它会将对象与原state进行合并，形成新的state

传入一个函数时：
有两个参数，一个是state、一个是props

state是原state对象
props：接收父组件传递的的

return一个对象与原state进行合并