B
B
Blog
搜索文档…
⌃K

useEffect

常用示例

useEffect 内部使用异步 Function

  • 不用改写 fetchDatauseCallback
  • 当副作用无法在 return 中消除的时候,如下异步请求(回调)中调用声明周期的方法 setState,则需要判断 isMounted 的值后再进行执行;
  • 是否销毁的状态 isMounted,写在 useEffect 内部,减少 useState 依赖; (注意方案可能有问题,待求证)
useEffect(() => {
let isMounted = true;
const fetchData = async () => {
const article = await API.fetchArticle(id);
if (!isMounted) {
// check isMounted for async action which may have side effect
setArticle(article);
}
};
fetchData().then();
return () => {
isMounted = false;
};
}, [id]);
useEffect(() => {
async function fetchData() {
// fetch your data
}
fetchData()
return () => {
// unbind/off event
}
}, [])

useEffect 中使用 setInterval/setTimeout, clearInterval/clearTimeout,无需将 id 转换为 useState

function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>;
}

使用 useReducer 解救 useEffect 无法去除的依赖

  1. 1.
    以 setCount 为例:
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + step);
}, 1000);
return () => clearInterval(id);
}, [step]);
  1. 1.
    将 setCount 转换成 reducer 事件 action :
const initialState = () => ({
count: 0,
step: 1,
});
const ACTIONS = {
INCREMENT: 'INCREMENT',
DECREMENT: 'DECREMENT',
};
const countReducer = ({count, step}, action) => {
const {INCREMENT, DECREMENT} = ACTIONS;
switch (action.type)
{
case INCREMENT:
return {
count: count + step,
};
case DECREMENT:
return {
count: count - step,
};
default:
return state;
}
};
const [state, dispatch] = useReducer(countReducer, initialState);
const { count, step } = state;
useEffect(() => {
const id = setInterval(() => {
dispatch({type: ACTIONS.INCREMENT}); // Instead of setCount(c => c + step);
}, 1000);
return () => clearInterval(id);
}, [dispatch]);
return (<div><span>{count}</span><span>{step}</span></div>);

如何去除 ESLint 提示的组件内常量依赖

示例:
function Video() {
const {PLAYLIST_UPDATED} = EVENT_TYPES;
useEffect(() => {
const updatedCallback = () => {
//...
};
event.on(PLAYLIST_UPDATED, updatedCallback);
return () => {
event.off(PLAYLIST_UPDATED, updatedCallback);
};
}, []);
return (<div>...</div>)
}
// Line 166:5: React Hook useEffect has a missing dependency: 'PLAYLIST_UPDATED'. Either include it or remove the dependency array react-hooks/exhaustive-deps
方法:将对应常量移出组件内,放置在组件外部或单独的配置文件中。
import event from 'Event';
const {PLAYLIST_UPDATED} = EVENT_TYPES;
function Video() {
useEffect(() => {
const updatedCallback = () => {
//...
};
event.on(PLAYLIST_UPDATED, updatedCallback);
return () => {
event.off(PLAYLIST_UPDATED, updatedCallback);
};
}, []);
return (<div>...</div>)
}