Question

许多组件在启动时需要请求数据、监听事件等，但是处理这些类型效果的代码最终分散在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>
  );
}