在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ React請求數(shù)據

React請求數(shù)據

react生命周期componentWillMount、componentDidMount是現(xiàn)在React請求數(shù)據的兩個生命周期,

  • componentWillMount

這個生命周期在React是在render前執(zhí)行,而且只執(zhí)行一次,在這里this.setState在頁面更新一次,而且不會重新渲染。
問題一:但是我有一個疑問,因為ajax是異步請求,在瀏覽器的時間循環(huán)機制中是在第一次macrotask事件結束前調用回調函數(shù)的this.setState(這個時候dom應該已經或者是vnode已將形成),但是dom應該已經或者是vnode已將形成是調用的render的函數(shù),這里是不是矛盾了?
問題二:React數(shù)據請求到底在哪個生命周期中請求,React推薦在componentDidMount請求數(shù)據,這個優(yōu)勢是什么(這里調用會導致重新渲染)

回答
編輯回答
影魅

一般是放在componentDidMount 里,你放在componentWillMount 里,拿到數(shù)據之后setState的時機是不確定的,可能是render之前,也可能是render之后,并不是下一個時間片,這依賴于ajax的返回時間,也并不是說就不能放在componentWillMount里,你也可以把ajax寫成同步的

2017年5月10日 16:13
編輯回答
淚染裳

不是“優(yōu)勢是什么”,是人家這兩個鉤子就是設計來這樣用的…
就好比:“請把手穿到手套里面,而不是把手套蒙在臉上”

2018年8月27日 19:20
編輯回答
不歸路

首先,編程中,沒有是不是最優(yōu),只有是不是最適合。

然后問問題之前最后搜索一下官網。

componentWillMount

componentWillMount() is invoked just before mounting occurs. It is called before render(), therefore calling setState() synchronously in this method will not trigger an extra rendering. Generally, we recommend using the constructor() instead.

簡單來說,就是在這里setState,可以避免一次額外的rendering,推薦可以用constructor代替

componentDidMount
componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request

這里setState會引發(fā)一次額外的rendering,并且該方法只有第一次控件初始化時才會調用。

如果你的界面本身是基于數(shù)據返回來創(chuàng)建的,避免用戶看到不友好的界面,那么你可以在constructor中去同步請求,并等待數(shù)據返回然后setState

如果你希望用戶能盡快的看到界面,那么你可以在componentDidMount中去做網絡請求,這樣你會先渲染一次沒有數(shù)據的界面,然后等待數(shù)據返回,會再rendering一次。

為什么react推薦第二種呢?因為網絡請求不穩(wěn)定,用戶一直等待網絡請求回來,再刷新界面。使用第一種的話,如果因為網絡原因,用戶可能回在空白頁面呆的時間比較久,對用戶不友好,所以從用戶友好角度來講,我們更愿意讓用戶先看到一個沒有數(shù)據的方式,再通過一個spin的動畫,來加載數(shù)據。

2017年7月4日 14:57