相对于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来实现