当前位置: 首页 > 文档资料 > Rax 中文文档 >

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>
  );
}