Wo werden HTTP-Reaktionsanfragen platziert?

藏色散人
Freigeben: 2023-01-05 09:34:07
Original
2129 Leute haben es durchsucht

react http请求应该放在componentDidMount中去操作,这是对于异步请求来说的;而对于同步的状态改变,react网络请求可以放在componentWillMount中,一般用的比较少。

Wo werden HTTP-Reaktionsanfragen platziert?

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react http请求放在哪?React网络请求到底该放在哪个生命周期中?

总的来说,对于异步请求,最好放在componentDidMount中去操作,对于同步的状态改变,可以放在componentWillMount中,一般用的比较少。

如果认为在componentWillMount里发起请求能提早获得结果,这种想法其实是错误的,通常componentWillMount比componentDidMount早不了多少微秒,网络上任何一点延迟,这一点差异都可忽略不计。

看看react的生命周期:

constructor() ----> componentWillMount() ----> render() ----> componentDidMount()
Nach dem Login kopieren

上面这些方法的调用是有次序的,由上而下依次调用。

constructor被调用是在组件准备要挂载的最开始,此时组件尚未挂载到网页上。

componentWillMount方法的调用在constructor之后,在render之前,在这方法里的代码调用setState方法不会触发重新render,所以它一般不会用来作加载数据之用。

componentDidMount方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载。此外,在这方法中调用setState方法,会触发重新渲染。所以,官方设计这个方法就是用来加载外部数据用的,或处理其他的副作用代码。与组件上的数据无关的加载,也可以在constructor里做,但constructor是做组件state初绐化工作,并不是做加载数据这工作的,constructor里也不能setState,还有加载的时间太长或者出错,页面就无法加载出来。所以有副作用的代码都会集中在componentDidMount方法里。

总结:

1.跟服务器端渲染(同构)有关系,如果在componentWillMount里面获取数据,fetch data会执行两次,一次在服务器端一次在客户端。在componentDidMount中可以解决这个问题,componentWillMount同样也会render两次。

2.在componentWillMount中fetch data,数据一定在render后才能到达,如果你忘记了设置初始状态,用户体验不好。

3.react16.0以后,componentWillMount可能会被执行多次。

推荐学习:《react视频教程

Das obige ist der detaillierte Inhalt vonWo werden HTTP-Reaktionsanfragen platziert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage