useEffect
优质
小牛编辑
125浏览
2023-12-01
许多组件在启动时需要请求数据、监听事件等,但是处理这些类型效果的代码最终分散在componentDidMount、componentDidUpdate 和 componentWillUnmount 中。如果你想当组件改变时有相同的变化,那么你需要在 componentDidUpdate 中添加一堆比较,或者在组件上设置 key,但是它将效果的控制分散到另一个文件中,完全超出了组件的控制。
useEffect简化了所有这些情况,使用 useEffect,传递给 useEffect 的函数将在渲染结束后运行。可以将 effects 视为是从 Rax 的纯函数世界到命令式的一个出口。
默认情况下,效果在每次完成渲染后运行,但是你可以选择仅在某些值发生更改时触发它。
import { useEffect } from 'rax';
useEffect(didUpdate);
useEffect(() => {
return () => {
// Clean up
};
});
在组件卸载时如果我们需要清理 effects 创建的资源,比如 订阅、计时器 等,可以通过 useEffect 返回的清理函数来实现。
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}