这一次，彻底搞懂useEffect

什么是useEffect?

让函数型组件拥有处理副作用的能力，类似生命周期函数。

1. useEffect执行时机

可以把useEffect看做componentDidMount,componentDidUpdate,componentWillUnmount这三个函数的组合。

• 当做componentDidMount和componentDidUpdate的时候

function App() {     const [count,setCount] = useState(0);     // 组件挂载完成之后 或 组件数据更新完成之后 执行     useEffect(() => {         console.log('组件挂载完成之后 或 组件数据更新完成之后 执行');     })     return (         <div>             {count}             <button onClick={() => setCount(count + 1)}>+1</button>         </div>     ) }

• 仅当做comonentDidMount的时候

useEffect(() => {     console.log('仅当做componentDidMount'); },[])

• 当做componentWillunmount的时候(注意：这里不是仅当做componentWillunmount)

useEffect(() => () => {     console.log('当做componentWillUnmount'); })

2. useEffect的使用方法示例

1. 为window对象添加滚动事件。（挂载完成后绑定事件，卸载组件后解除绑定）

function App() {     function onScroll() {         console.log('监听到页面发生滚动了');     }     useEffect(() => {         window.addEventListener('scroll',onScroll);         return () => {             // 卸载组件时解除对事件的绑定             window.removeEventListener('scroll',onScroll);         }     })     return (         <div>             App          </div>     ) }

1. 设置定时器让count数值每隔一秒增加1。

function App() {          const [count,setCount] = useState(0);     useEffect(() => {         const timeId = setInterval(() => {            setCount(count => count + 1);          },1000)         return () => {             clearInterval(timeId);         }     },[])     return (         <div>             <h1>当前求和为：{count}</h1>          </div>     ) }

3. useEffect解决的问题

1. 将一组相干的业务逻辑归置到了同一个副作用函数中.
2. 简化重复代码,使组件内部代码更加清晰.

4：useEffect的第二个参数

• 只有指定数据发生变化的时候才触发effect

useEffect(() => {     document.title = count; }, [count]) 

5：useEffect结合异步函数

在useEffect中直接使用async和await是会报错的，推荐使用立即执行函数来包裹异步函数。

function getData() {     return new Promise(resolve => {         resolve({msg: 'Hello'})     }) } function App() {      useEffect(() => {         (async function () {             const result = await getData();             console.log(result);         })()     },[])          return (         <div>             App         </div>     ) }

参考文献

• 官方文档

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏

[[email protected]]

分享 (0)