useEffect
1.useEffect的介绍
- 引用官网的一句话就是:useEffect 就是一个 Effect
Hook
,给函数组件增加了操作副作用的能力。(你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”,或者简称为“作用”。) 可
以在组件内多次调用
- React 会在
每次渲染
后调用副作用函数 —— 包括第一次渲染
的时候。 - 副作用函数还可以通过返回一个函数来指定如何
“清除”
副作用。 - React 会在组件卸载的时候执行清除操作。
- 它的第二个参数为数组:仅在数组(定义的第二个参数)里面各项有一项发生变化的情况才会触发当前的 userEffect ,否则不触发。
2.基本使用
2-1.基本使用
useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后,当它运行时,它获取数据并更新状态。然后,一旦状态更新,组件将重新呈现,这将再次触发useEffect,这就是问题所在。
useEffect(()=>{undefined
console.log(props.number)
setNumber(props.number)
}) //所有更新都执行
2-2 传递空数组
当第二个参数为空数组时,仅在挂载与卸载时触发
useEffect(()=>{undefined
console.log(props)
},[]) //仅在挂载和卸载的时候执行
2-3 传递一个值
当参数为一个值,类似于Vue中的监听器,当该值发生变化时(底层使用Object.is()进行判断),才会调用useEffect函数
useEffect(()=>{undefined
console.log(count)
},[count]) //count更新时执行
2-4 传递多个值
useState返回的setter 不会在每次渲染时重新创建,因此只会运行一次
const Asynchronous : React.FC=({number})=>{undefined
const [number2,setNumber2] = useState(number);
useEffect(()=>{undefined
console.log(number)
setNumber2(number)
},[number,setNumber2]) //监听props对象number的更改
//setNumber2是useState返回的setter,所以不会在每次渲染时重新创建它,因此effect只会运行一次
}
2-5 传递props的对象 传递的useState返回的setter
2-6 return
return中的函数 会在组件销毁时被调用 相当于componentWillUnMount
类似Vue中的onDestroy
const timer = setInterval(() => {undefined
setCount(count + 1)
}, 1000)
// useEffect方法的第一个参数是一个函数,函数可以return一个方法,这个方法就是在组件销毁的时候会被调用
useEffect(() => {undefined
return () => {undefined
clearInterval(timer)
}
}, [])