React中的useEffect useLayoutEffect到底怎么用
作者：碰磕
这篇文章主要介绍了React中的useEffect useLayoutEffect具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
前言
使用缘由：
在函数中当请求数据时并且给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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！