1 useEffect
文章推荐
useEffect(() => {
console.log('====111111======');
return () => {
console.log('=======222222=======');
};
});
在每次代码刷新时候都会打印111111和222222
const [state, dispatch] = useReducer(
(oldState, payload) => {
if (payload.type === 'tick') {
return {
...oldState,
count: oldState.count + oldState.step,
};
}
return {
...oldState,
};
},
{ count: 0, step: 1, type: '' },
);
useEffect(() => {
console.log('========111111======');
const id = setInterval(() => {
console.log('========222222======', state.count);
dispatch({ type: 'tick' });
}, 1000);
return () => {
console.log('========333333======', state.count);
clearInterval(id);
};
}, [dispatch]);
<h1>{state.count}</h1>
console.log('========111111======'); 只会执行一次,****说明每次返回的dispatch都是同一个函数。
console.log('========222222======', state.count);会被多次执行,但是打印出来的state.count会一直是0 (因为Capture Value的原因)
console.log('========333333======', state.count); 不会执行,页面其他state更新它也不受影响
页面其他state更新不会影响到上面useEffect内部执行。
h1标签里面的值会正常一秒增加一次。
可以把上面理解成一个小型的Redux。