useEffect第二个参数

Question

项目中遇到useEffect第二个参数传了一个state，但是初始useEffect内部会执行一次，这是为什么？打印state的值是没有改变的。例如下方代码

const [filterCon, setFilterCon] = useState<any>();
//点击事件
const handleReset = (value) => {
      setFilterCon(value)
    };

useEffect(() => {
        console.log('111)
    }, [filterCon]);

Answer 1

useEffect 是 componentDidMount，componentDidUpdate 和 componentWillUnmount 三者的结合
所以他的作用就是组件初始化，组件卸载，组件每次更新时执行
而每次更新都执行会有多余的不必要执行，所以就有了第二个参数数组每次update的时候这个数组里值变化了就会执行，但这只是update阶段，初始化还是会执行

如果判断是否第一次执行：

const initRef = useRef()
useEffect(() => {
    if (initRef.current) {
         // 非初始化执行
    } else {
        initRef.current = true
    }
}, [filterCon]);

然后常用的话，你就可以自己封装一个update的hooks

function useUpdate(fn, deps) {
    const initRef = useRef()
    return useEffect(() => {
        if (initRef.current) {
             return fn();
        } else {
            initRef.current = true
        }
    }, deps)
}