React useEffect cleanup

date

Mar 11, 2021

slug

react-useeffect

status

Published

tags

React

summary

React useEffect使用进阶-清除

type

Post

以最 useEffect 经常使用场景为例：

useEffect(() => {
  document.title = `The page is loaded`;
});

设定依赖触发的值：

useEffect(() => {
  document.title = `The page ${title} is loaded`;
}, [title]);

上述代码会在 title 修改后触发。

传入空数组，只在组件挂载时运行一次：

useEffect(() => {
  // Only run once
  document.title = `The page ${title} is loaded`;
}, []);

清理 useEffect

自动调用清理函数只需要添加一个 return 方法：

useEffect(() => {
  // Your effect

  return () => {
    // Cleanup
  };
}, []);

清理函数可以防止内存泄漏，和清理不需要的元素，比如：