react hooks--useEffect

useEffect的功能是可以让你在函数组件中执行副作用操作。他可以替代类组件的componentDidMount、componentDidUpdate 和 componentWillUnmount三个生命周期函数。

一、基础用法

用法1：在组件挂载完成后以及任何数据进行更新后执行，相当于componentDidMount和componentDidUpdate组合。

useEffect(()=>{
      // To do Something
})

用法2：useEffect第二个参数可以传递一个依赖数组，当依赖数组为空时，在组件挂载完成后执行一次，相当于componentDidMount。

useEffect(() => {
    // To do Something
}, [])

用法3：当依赖数组有值时，在组件挂载完成后执行，后续当依赖数组中任何值发生改变时，都会再次执行。

useEffect(() => {
    // To do Something
}, [dep1, dep2, ……])

用法4：useEffect可以返回一个函数，该函数将在组件被卸载时的执行，相当于componentWillUnmount。

useEffect(() => {
    // To do Something    
    return () => {
      // To do clean up
    };
    // or return function () {}
}, []);

二、具体案例

实现一个数字递增的案例，当Learn页面首次加载时，显示初始化的数字count为0，对user进行赋值为'小红0'，并在控制台打印语句。当点击<数字递增>按钮时，由于count值进行了更新，则用setUser更改操作人名称，并打印相关语句。当点击<跳转路由（到测试页）>按钮时，由于Learn页面会被卸载，则执行卸载的函数。

import React, { useState, useEffect } from 'react';
import { history } from 'umi';
​
const Learn: React.FC = () => {
  const [count, setCount] = useState<number>(0);
  const [user, setUser] = useState<string>('');
​
  useEffect(() => {
    setUser('小红' + count);
    console.log(`组件首次加载和count每次更新我都会执行。count: ${count}`);
  }, [count]);
​
  useEffect(() => {
    return () => {
      console.log('组件卸载时我会执行哦');
    };
  }, []);
​
  const addCount = () => {
    setCount(count + 1);
  };
​
  return (
    <div style={{ padding: '20px' }}>
      <p>当前数字：{count}</p>
      <p>操作人：{user}</p>
      <button onClick={addCount}>数字递增</button>
      <button
        style={{ marginLeft: '10px' }}
        onClick={() => {
          history.push('/test');
        }}
      >
        跳转路由（到测试页）
      </button>
    </div>
  );
};
​
export default Learn;

三、效果展示

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。