react hooks之useEffect

相对于class component来说，所有的生命周期都在effect中
effect定义官方的index.d.ts

type EffectCallback = () => (void | (() => void | undefined));
type DependencyList = ReadonlyArray<any>;
function useEffect(effect: EffectCallback, deps?: DependencyList): void;

接受的第一个参数为一个function，可以不然会任何东西，也可以返回一个function， 当返回一个function时相当于原来生命周期的componentWillUnmount（组件销毁前执行）；

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

export const Demo2 = () => {
    let [count, setCount] = useState(0);
    useEffect(() => {
        console.log('effer inner');
        let timmer = setTimeout(() => {
            setCount(x => x + 10);
        }, 1000);
        // 当返回一个function 时会在组件销毁前执行
        return () => {
            clearTimeout(timmer);
        }
    });
    console.log('render');
    return (
        <div className="demo2-container">
            <div>{count}</div>
            <button onClick={() => setCount(x => x+1)}>加</button>
            <button onClick={() => setCount(x => x-1)}>减</button>
        </div>
    );
}

一个function component中可以有多个useEffect，但是不能将effect每次执行个个数必须一样多
// 这种情况就会包错误

export const demoX = () => {
	let [count, setCount] = useState(0);
	useEffect(() => { setInterval(() => setCount(x => x+1))}, []);
	if(count > 3) {
		useEffect(() => {console.log(count， true)});
	}
	return (<>{count}</>);
}

// 这样就不会报错

export const demoX = () => {
	let [count, setCount] = useState(0);
	useEffect(() => { setInterval(() => setCount(x => x+1))}, []);
	if(count > 3) {
		useEffect(() => {console.log(count， true)});
	} else {
		useEffect(() => {console.log(count， false)});
	}
	return (<>{count}</>);
}

useEffect中第二个参数

1.为一个any的数组，当function component第一次运行时都会执行一遍useEffect，但是当第二次render时第二个参数（DependencyList ）中的所有值都不变时就不会运行effect
2.当忽略第二个参数时每次都会执行
3.DependencyList可设置当前render运行时产生的值，就是依赖的含义

componentWillReceiveProps向这种生命周期就可以用DependencyList来实现