React面试题总结

1、React最新的生命周期是怎样的？
react16之后又三个生命周期被废除（但并未删除）

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

官方计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，目的是为了向下兼容，但是对于开发者而言应该尽量避免使用它们，而是使用新增的生命周期函数替代他们

目前React 16.8+的生命周期分为三个阶段，分别是挂在阶段、更新阶段、写在阶段

挂载阶段：

• constructor:构造函数，最新被执行，我们通常在构造函数里初始化state对象或者给自定义方法绑定this
• getDerivedStateFromProps:static getDerivedStateFromProps(nextProps,prevState)，这个是静态方法，当我们接收到新的属性想去修改我们state，可以使用getDerivedStateFromProps(新增生命周期)
• render:render函数是纯函数，只返回需要渲染的东西，不应该包含其它业务逻辑，可以返回原生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容
• componentDidMount:组件装载之后调用，此时我们可以获取到DOM节点并操作，比如对canvas，svg的操作，服务器请求，订阅都可以写在这个里面，但是记得在componentWillUnmount中取消订阅

更新阶段：

• getDerivedStateFromProps:此方法在更新挂载阶段都可能会调用
• shouldComponentUpdate:shouldComponentUpdate(nextProps,nextState)，有两个参数nectProps和nectState，表示新的属性和变化之后的state，返回一个布尔值，true表示会触发重新渲染，false表示不会触发重新渲染，默认返回true，我们通常利用此声明周期来优化React程序性能
• render:更新阶段也会触发此生命周期
• getSnapShotBeforeUpdate:getSnapshotBeforeUpdate(prevProps,prevState)，这个在render方法之后，componentDidUpdate之前调用，有两个参数prevProps,prevState，表示之前的属性和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate,如果你不想要返回值，可以返回null,此生命周期必须与componentDidUpdate搭配使用(新增生命周期)
• componentDidUpdate:componentDidUpdate(prevProps,prevState,snapshot)，该方法在getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps,prevState,snapshot，表示之前的props,之前的state,和snapshot。第三个参数是getSnapshotBeforeUpdate返回的，如果触发某些回调函数时需要用到DOM元素的状态，则将对比或计算过程迁移至getSnapshotBeforeUpdate，然后再componentDidUpdate中统一触发回调或更新状态。

卸载阶段：

• componentWillUnmount:当我们的组件被卸载或者销毁了就回调用，我们可以在这个函数里去清楚一些定时器，取消网络请求，清理无效的DOM元素等垃圾清理工作

一个查看react生命周期的网站
2、React的请求应该放在哪个生命周期中？
React的异步请求到底应该放在哪个生命周期里，有人认为再componentwillMount中可以提前进行异步请求，避免白屏，其实这个观点是有问题的。

由于Javascript中异步事件的性质，当您启动API调用时，浏览器会在此期间执行其他工作。当React渲染一个组件时，它不会等待componentWillMount它完成任何事情-React继续前进并继续Render,没办法“暂停”渲染以等待数据到达。

而在componentWillMount请求会有一系列潜在的问题，首先ÿ