react-hook-useEffect的踩坑记录

import {
      useState, useEffect } from 'react';
import moment from 'moment';

const DateTime = () => {
     
    const [time, settime] = useState(moment(Date()).format('YYYY - MM - DD : HH:mm:ss'));
    let timer=0;
    useEffect(() => {
     
        timer=setInterval(() => {
     
            settime(moment(Date()).format('YYYY - MM - DD : HH:mm:ss'))
        }, 1000);
        return ()=>{
     
            clearInterval(timer)
        }
    }, []);
    return time
};

export default DateTime;

1. 参数

• useEffect有两个参数,第一个参数是function,第二个参数是array[]
• array里面有值的时候,这个值发生了改变才会执行第一个参数的函数
• array里面没有值的时候是页面加载的时候会执行函数
• 页面卸载的时候执行return里的代码

2. 注意事项

• 如果在第一个参数里存在定时器记得在return的时候清除掉,不清除掉会抱错

devScripts.js:5035 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

• 函数名字首字母记得大写否则会报这个错

"useEffect" is called in function "dateTime" that is neither a React function component nor a custom React Hook

useEffect第二个参数为空数组的时候,相当于componentDidMount
useEffect在第一个参数(函数主体里return相当于componentWillUnmount)
第一次写文章,欢迎讨论交流