Preface
Reason for use:
When requesting data in a function and assigning a value to the state will cause the entire function to refresh,
This leads to a dead loop to make data requests, so you can use useEffect
introduce
- useEffect (handle side effects)
- useLayoutEffect (simultaneous execution side effects)
use
Empty dependency
import axios from 'axios';
import React,{useEffect, useState} from 'react';
function Test2() {
const [list,setlist] =useState([])
useEffect(()=>{
("./").then(res=>{
()
setlist()
})
},[])// Parameter 1 is a function, parameter 2 is an array return (
<div>
{
(item=>
<li key={}>{}</li>
)
}
</div>
);
}
export default Test2;
Passing an empty array means no dependencies, only executed once
Non-empty dependency
Array passes dependencies, and will be executed after the dependency is updated (can be imagined as an update of the class class)
The following example represents the first execution, and will also be executed after the name is updated.
/**
* Passing non-empty array
*/
import axios from 'axios';
import React,{useEffect, useState} from 'react';
function Test3() {
const [name,setname] =useState("peng-ke")
useEffect(()=>{
setname((0,1).toUpperCase()+(1))
},[name])// Parameter 1 is a function, parameter 2 is an array return (
<div>
{name}
<button onClick={()=>{setname("study")}}>Revise</button>
</div>
);
}
export default Test3;
Implement destruction operations
Execute the behavior after destruction through the return function
/**
* Simulated destruction
*/
import React,{Component, useEffect, useState} from 'react';
function Children() {
const [name,setname] =useState("peng-ke")
useEffect(()=>{
=()=>{
("resize")
}
let timer=setInterval(() => {
("ppppp")
}, 1000);
return ()=>{
("destroy");
=null;
clearInterval(timer)
}
},[])
return (
<div>
Hit
</div>
);
}
class Test4 extends Component{
state={
iscreated:true
}
render(){
return(
<div>
<button onClick={()=>{
({
iscreated:!
})
}}>Click me</button>
{ && <Children />}
</div>
)
}
}
export default Test4;
The difference between the two
- The call time is different, useLayoutEffect is the same as the original componentDidMount & componentDidUpdate. It is called synchronously after react completes the DOM update, which will block the page rendering, and useEffect will be called only after the entire page rendering is completed, so it is recommended to use useEffect.
- If the code for operating DOM is recommended to be placed in useLayoutEffect
This is the article about how to use useLayoutEffect in React. For more related React useEffect useLayoutEffect content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!