React中的useEffectuseLayoutEffect到底怎么用
短信预约 -IT技能 免费直播动态提醒
前言
使用缘由：
在函数中当请求数据时并且给state赋值会导致整个函数刷新，
从而导致死循环的进行数据请求， 所以这时候可以用到useEffect
介绍
- useEffect(处理副作用)
- useLayoutEffect(同步执行副作用)
使用
空依赖
import axios from 'axios';
import React,{useEffect, useState} from 'react';
function Test2() {
const [list,setlist] =useState([])
useEffect(()=>{
axios.get("./test.json").then(res=>{
console.log(res.data)
setlist(res.data)
})
},[])//参数1是函数，参数2是数组
return (
<div>
{
list.map(item=>
<li key={item.id}>{item.name}</li>
)
}
</div>
);
}
export default Test2;
传空数组表示无依赖，只执行一次
非空依赖
数组传依赖，当该依赖更新后也会进行执行(可以想象成class类的更新)
下方案例代表第一次执行,name被更新后也会进行执行
import axios from 'axios';
import React,{useEffect, useState} from 'react';
function Test3() {
const [name,setname] =useState("peng-ke")
useEffect(()=>{
setname(name.substring(0,1).toUpperCase()+name.substring(1))
},[name])//参数1是函数，参数2是数组
return (
<div>
{name}
<button onClick={()=>{setname("study")}}>修改</button>
</div>
);
}
export default Test3;
实现销毁操作
通过return函数执行销毁后的行为
import React,{Component, useEffect, useState} from 'react';
function Children() {
const [name,setname] =useState("peng-ke")
useEffect(()=>{
window.onresize=()=>{
console.log("resize")
}
let timer=setInterval(() => {
console.log("ppppp")
}, 1000);
return ()=>{
console.log("销毁");
window.onresize=null;
clearInterval(timer)
}
},[])
return (
<div>
碰磕
</div>
);
}
class Test4 extends Component{
state={
iscreated:true
}
render(){
return(
<div>
<button onClick={()=>{
this.setState({
iscreated:!this.state.iscreated
})
}}>点我</button>
{this.state.iscreated && <Children />}
</div>
)
}
}
export default Test4;
两者区别
- 调用时机不同,useLayoutEffect和原来的componentDidMount&componentDidUpdate一致,在react完成DOM更新后马上同步调用，这样会阻塞页面渲染，而useEffect是会在整个页面渲染完成才会调用所以推荐使用useEffect
- 如果操作DOM的代码推荐放在useLayoutEffect中
到此这篇关于React中的useEffect useLayoutEffect到底怎么用的文章就介绍到这了,更多相关React useEffect useLayoutEffect内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
