react项目中遇到的几个问题

react项目中遇到的几个问题

前言

由于我之前有过react经验,同事之前做react项目时问了我一些问题,其中几个问题虽然常见,但时间长了还是容易忘记,这里简单总结一下

问题一:

如何保证定时器(setTimeout与setInterval)每次执行与下一次执行都保证相同的间隔时间,不管前一次运行了多长时间

场景:
例如需要每间隔1秒执行一次请求的发起与响应,不管第一次发起请求到响应花费了多久,例如200ms,下一次请求一定与第一次完成间隔1000ms(即第二次请求在1200ms时发起,而不是800ms时发起),以此类推

思路一:
考虑到重新计时,应该可以通过防抖来实现,上网查阅后确实可行,还提供了思路二
之前:

useEffect(()=>{
    const timer=setInterval(()=>{
        Ajax();//代表发起异步操作
    },1000)
    return ()=>{clearInterval(timer)};
},[])

修改之后:

useEffect(()=>{
    debounce(Ajax,1000);
},[])
//防抖函数
const debounce = function (fn,delay){
    let timer;//声明计时器
    return function(){
        let _this = this; 
        clearTimeout(timer);
        timer = setTimeout(()=>{
            fn.apply(_this);
        },delay)
    } 
} 

思路二:
通过setTimeout递归实现
解释:
可以通过 setTimeout(fn , 0)来理解,setTimeout可以将代码推迟到指定时间执行,这样,当确保第一次执行完毕后,再推迟到1000ms之后执行第二次
之前:

useEffect(()=>{
    const timer=setInterval(()=>{
        Ajax();//代表发起异步操作
    },1000)
    return ()=>{clearInterval(timer)};
},[])

修改之后:

useEffect(()=>{
    let timer = setTimeout(function Ajax(){
        //…
        timer = setTimeout(Ajax,1000);
    },1000)
},[])

问题二:

react-hooks中的useState是一个异步的操作,如何实时获取到更新后的新的State状态呢?
如果是需要在页面中展示的值,直接在页面中通过{xxx}展示即可

思路一:
通过useRef实现
useRef返回一个可变的ref对象,其.current属性被初始化为传入的参数(initialValue)
返回的ref对象在组件的整个生命周期内都保持不变

const [state,setState]=useState('')
const modelRef = useRef(null);

useEffect(()=>{
    //每次更新都把值赋给modelRef
    modelRef.current = state;
},[state]);//保证state改变时,触发useEffect

function handleChange(newState){
    setState(newState);//state改变,触发useEffect
    setTimeout(getState, 0);//设置一个0ms延迟很重要
} 

function getState(){
    console.log(modelRef.current);//获取到最新值
}

同时获取多个最新值

const changeSelectRef = useRef({
    "status": "",
    "modelStatus": "",
    "keyWord": ""
});
useEffect(()=>{
    changeSelectRef.current = {
        "status": status,
        "modelStatus": modelStatus,
        "keyWord": keyWord
    };
}, [status, modelStatus, keyWord]);

思路二:
把setState(即需要立即获取的值的set函数)放在setTimeout(()=>{}, 0)里执行

function handleChange(newState){
    setTimeout(()=>{
		setState(newState)
	}, 0);//设置一个0ms延迟很重要
} 

思路三:
通过useEffect(()=>{},[xxx])来获取

useEffect(()=>{
	console.log(state)
},[state])

function handleChange(newState){
	setState(newState)
} 

参考:
http://www.jsphp.net/js/show-9-157-1.html
https://javascript.ruanyifeng.com/advanced/timer.html

https://blog.csdn.net/hl971115/article/details/104564923
https://segmentfault.com/a/1190000020948922
https://segmentfault.com/a/1190000039365818

  • 5
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值