react useEffect & useState

useEffect 副作用钩子

清理函数，在useEffect的方法体里面的return ()=>{};

//常见作用 清除定时器、取消订阅、移除事件监听。

用于释放timeer 事件等，如计时器，取消订阅，释放资源，解决内存泄漏的问题；

假如react的useEffet里面有个计时器,计时器里面有一个console.log一致在打印信息，

但是清理函数没有clearInterval 清理计时器，当前的浏览器后台会一直在打印，内存爆掉。

 

语法：

useEffect(()=>{
//do sth
 
return ()=>{};//清理函数 ,cleanup函数
}, [dep]) [dep]依赖项
 

 

执行时机：

[] 空数组,首次渲染执行，只执行一次；常用；init 初次加载

[obj1,obj2,arr1] 依赖项数组， 首次渲染执行，以及之后的obj1,obj2,arr1发生更新时执行;

 

不传递 [dep]依赖项，不建议；很容易造成重复请求，以及死循环；尤其是在effect里面还有setState的时候

适用：极少数“每次渲染都要同步的场景”。

风险：

例如

useEffect(()=>{
//do sth
 
return ()=>{};
})不传递 [dep]依赖项

 

 

状态钩子

React setState

const [count, setCount] = useState(0); 
const handleClick = ( ) => setCount(count + 1); // 在 JSX 中直接用: {count}