useEffect

基本
useEffect 来内部将完成一些有副作用的代码执行。
清除 effect
组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点，useEffect 函数需返回一个清除函数。
1
useEffect(() => {
2
  const subscription = props.source.subscribe();
3
  return () => {
4
    // 清除订阅
5
    subscription.unsubscribe();
6
  };
7
});
Copied!
为防止内存泄漏，清除函数会在组件卸载前执行。另外，如果组件多次渲染（通常如此），则在执行下一个 effect 之前，上一个 effect 就已被清除。若想避免每次更新都触发 effect 的执行，我们可以限制 useEffect 的触发时机。
1
useEffect(
2
  () => {
3
    const subscription = props.source.subscribe();
4
    return () => {
5
      subscription.unsubscribe();
6
    };
7
  },
8
  [props.source],
9
);
Copied!
此时，只有当 props.source 改变后才会重新创建订阅。
请确保数组中包含了所有外部作用域中会发生变化且在 effect 中使用的变量，否则你的代码会引用到先前渲染中的旧变量
与 componentDidMount、componentDidUpdate 不同的是，在浏览器完成布局与绘制之后，传给 useEffect 的函数会延迟调用。这使得它适用于许多常见的副作用场景，比如设置订阅和事件处理等情况，因此不应在函数中执行阻塞浏览器更新屏幕的操作。

以前

useState

下一个

useContext

最近更新 1yr ago

复制链接

内容

基本

清除 effect