JS异步与React useRef使用结合

业务场景:在父组件加载页面的时候,获取子组件中通过网络请求获取的值,
用到的hook:useEffect()、useRef()。

这里是父组件
const BaseAssestsTreeContext = createContext(); 
const myRefAssetMonitor=useRef()

//父组件关键useEffect
  useEffect(() => {
    console.log("====父页面,useEffect方法")
    console.log("===进来父页面去获取 getD()",myRefAssetMonitor.current.getD())
    setTimeout(()=>{
      if(groupId){
        queryAreaAsset(groupId);
      }else{
        console.log("===延时去获取 子页面的钩子方法 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("====子页面  资产树 useEffect方法")
    tree();//这里获取网络请求
  }, []);

  //想暴露给父组件的值 
  useImperativeHandle(myRef, () => ({
    getD: () => {
      return defaultGroupId;
    }
  }));

父子组件渲染顺序和钩子函数值.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值