react处理多次请求_React组件的生命周期

最新推荐文章于 2024-08-06 09:54:28 发布

weixin_39630909

最新推荐文章于 2024-08-06 09:54:28 发布

阅读量604

点赞数

文章标签： react处理多次请求

本文链接：https://blog.csdn.net/weixin_39630909/article/details/112286566

版权

《快速上手React编程》CH5 React组件的生命周期

React组件的生命周期有仨，挂载、更新、卸载。字面意思，挂载就是建立React对象与实际DOM的联系，更新就有新的状态或者属性的时候触发变更，卸载就是解除这一联系。

这三个生命周期对应了一些事件，事件可以理解成这些生命周期的钩子，可以在这些事件发生的前前后后进行拦截，搞一些额外的操作。这些事件定义在类里会被React在该执行的时候，直接调用（重构父组件方法）。

constructor在这三个生命周期之前。

另外还有一个this.forceUpdate方法，可以用于强制刷新，不依赖state和props的变更，场景是render使用了不属于state和props的数据时使用，但是官方不建议这么用，因为“它让组件变得不纯”，不再是个纯函数了，我感觉像个外挂，render不应该依赖state和props以外的数据，的确不用最好。

1、挂载：

挂载有俩事件，componentWillMount和componentDidMount，前者在服务端同构代码里会被执行，后者不会，所以写在后者里的逻辑可以确保只在前端执行。前者执行的时候还没有挂载，后者执行了就是真实DOM准备好了（子组件也挂载好了，子组件的componentDidMount会比父组件的这个函数先执行）。

用途：

1) componentWillMount ：可以在componentWillMount的时候调用setState，防止在DOM挂载好之前，多次setState，导致react元素被多次render，这些render的中间结果都不会被显示在DOM上，只有最后一次会，所以写这里可以避免这些中间结果的渲染。

2) componentDidMount：一个是因为仅在浏览器执行，所以在服务器/浏览器代码同构的时候，可以用于保证代码仅在浏览器执行。另一个是有DOM了再去拿数据，因为拿数据是异步的，写在componentWillMount里，不能保证数据先好还是DOM挂载先好，逻辑上行为不好预测。所以DOM好了再去拿数据，比较稳。

感觉考虑上主要是什么时候setState不会触发额外渲染，以及异步请求在事件里的执行顺序。

2、更新：

更新有四个事件

1) 收到新属性前 componentWillReceiveProps，

2) 是否要更新 shouldComponentUpdate，

3) 更新前 componentWillUpdate，

4) 更新后 componentDidUpdate。

这四个事件都只在更新的时候会被触发，初始化的时候，都不会被调用。它们分别在更新组件属性、更新组件状态、使用this.forceUpdate三种情况下有不同的执行顺序。

更新组件属性-事件顺序：收到新属性前、是否需要更新、更新前、render、更新后。

更新组件状态-事件状态：是否需要更新、更新前、render、更新后。

this.forceUpdate-事件状态：更新前、render、更新后。

很容易理解，要更新组件属性才有“收到新属性”这件事，强制更新就不用判断是不是需要更新了，一定要更新的。