hooks是react重要的手段 因此也借此机会,学习了一波useEffect的使用,记录随笔以备日后查阅
当我们写一个函数,我们希望的是这个函数返回的是一个页面来进行显示 那么其余和数据计算以及显示的操作,我们把其称为副作用 比如我们想显示一个页面,我们需要从后台调用接口来进行数据的获取 这个操作就属于副作用,可以使用useEffcet来进行实现 并且useEffect的出现也可以代替生命周期API来产生相应的作用
但我们在进行学习的时候,我们应该学会unlearning (忘记) 也就是忘记我们之前的生命周期(之前的知识会更好的辅助我们理解useEffct,而不应该影响我们学习)
执行规则,当useEffcet只有一个参数的时候,默认是在页面渲染完成的时候调用以及组件更新之后调用 组件每渲染一次,该函数就自动执行一次
1.我们只想在最开始的时候调用一次 例如:我们从后端请求数据来显示,我们只想在页面开始的时候进行一次请求就好 这个时候就需要设置第二个参数为[],即可实现 此时它只会在页面初次渲染的时候调用一次,其余不再执行
function a () => { useEffect(()=>{ console.log("1") //这里设置为[],那么该useEffect只在页面渲染时候调用一次 },[]) }2.我们只想在某个值变化的时候进行调用
function a () => { useEffect(()=>{ console.log("name") //这里第二个参数传入name ,那么上面这个打印语句就只会在name数值发生变化的时候进行调用 },[name]) }useEffect()允许返回一个函数,在组件卸载时,执行该函数,清理副效应
使用useEffect()时,有一点需要注意。如果有多个副效应,应该调用多个useEffect(),而不应该合并写在一起。(我惊了,因为我就是写在一起的)