業(yè)務(wù)場景：在父組件加載頁面的時(shí)候，獲取子組件中通過網(wǎng)絡(luò)請求獲取的值糙及，
用到的hook:useEffect()详幽、useRef()。
這里是父組件
const BaseAssestsTreeContext = createContext();
const myRefAssetMonitor=useRef()
//父組件關(guān)鍵useEffect
useEffect(() => {
console.log("====父頁面丁鹉，useEffect方法")
console.log("===進(jìn)來父頁面去獲取 getD()",myRefAssetMonitor.current.getD())
setTimeout(()=>{
if(groupId){
queryAreaAsset(groupId);
}else{
console.log("===延時(shí)去獲取 子頁面的鉤子方法 myRefAssetMonitor.current.getD()",myRefAssetMonitor.current)
queryAreaAsset(myRefAssetMonitor.current.getD());
setGroupId(myRefAssetMonitor.current.getD())
}
},300)
}, [])
<div className={style.bg}>
<div className={style.bg_tree}>
<BaseAssestsTreeContext.Provider>
<BaseAssestsTree myContext={BaseAssestsTreeContext} myRef={myRefAssetMonitor}/>
</BaseAssestsTreeContext.Provider>
</div>
<div />
這里是子組件
useEffect(() => {
console.log("====子頁面 資產(chǎn)樹 useEffect方法")
tree();//這里獲取網(wǎng)絡(luò)請求
}, []);
//想暴露給父組件的值
useImperativeHandle(myRef, () => ({
getD: () => {
return defaultGroupId;
}
}));
父子組件渲染順序和鉤子函數(shù)值.png
