在react选择合适的生命周期向服务端发起请求

在使用react当中,我们常常面临着选择合适的生命周期向服务端发起请求的抉择。我根据日常业务经验和react官方文档,总结出两个参考因素:
1、请求的类型(同步或异步)
2、请求数据的用途(初次渲染、前端向服务端同步数据、服务端向前端同步数据);
场景1:数据用作UI组件的初次渲染,如果需要保证组件和数据同时渲染出来,这个时候需要同步的请求方式,可以在constructor生命周期中发起同步的XmlHttpRequest请求,这样会阻碍组件的实例化,一般不推荐这样的实现方式。react16.0之前面临同样的情况一般会在componentWillMount中发起数据的请求,但是由于react16.0已经不推荐使用componentWillMount生命周期,并且react采用了新的fiber异步渲染架构可能会造成componentWillMount生命周期方法多次调用。所以,现在我们一般是在constructor生命周期中发起同步数据请求。如果出于用户体验考虑,不希望同步请求阻塞页面的渲染,需要采用异步的请求方式,这个时候需要在componentDidMount中发起异步请求,数据缺省部分用spin提示loading状态。componentDidMount方法在react的整个生命周期中只会调用一次,并且如果在这个生命周期中订阅了事件,可以在相应的componentWillMount生命周期中取消订阅。
场景2:如果我们需要根据前端的应用状态向服务端同步数据,那我们需要在componentDidUpdate生命周期中将前端的状态数据处理之后异步发送给服务端,这个生命周期更能体现react框架的响应性,并且在componentDidUpdate中通过比较前后应用状态,可以减少不必要的重复请求。
场景3:如果我们需要根据服务端的最新数据更新组件状态,我们一般通过轮询或者websocket等其他服务端主动推送方式。这个时候我们同样选择在componentDidMount,理由和场景1异步获取组件初次渲染数据是一样的。
以上主要是针对日常工作的简单思考总结,如有缺漏不妥之处,欢迎拍砖

posted @ 2019-10-10 12:33  snicker  阅读(1185)  评论(0编辑  收藏  举报