React Hooks学习篇-useEffect

最新推荐文章于 2024-04-16 14:46:33 发布

原创最新推荐文章于 2024-04-16 14:46:33 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js

本文介绍了React Hooks中的useEffect，它用于在函数组件中执行副作用操作。useEffect在组件挂载和更新时的行为类似于传统React生命周期的componentDidMount和componentDidUpdate。通过调整依赖数组，可以精确控制effect的执行时机，例如只在特定状态变更时执行。同时，展示了如何清除副作用，如定时器，以避免内存泄漏。这在实际开发中对于管理组件状态和资源清理至关重要。

Effect Hook 可以在函数组件中执行副作用操作.

const [name, setName] = useState('Koli');
const [count, setCount] = useState(4);
const [regions, setRegions] = useState(4);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

针对上述代码说明:
组件初始化会执行,相当于componentDidMount生命周期函数;
当只有要一个useState改变时,都会会执行,相当于componentDidUpdate更新的生命周期函数;

const [name, setName] = useState('Koli');
const [count, setCount] = useState(4);

  useEffect(() => {
    console.log(name)
  },[name]);

针对上述代码说明:
该effect只初始化执行一次,相当于componentDidMount生命周期函数;

const [name, setName] = useState('Koli');
const [count, setCount] = useState(4);

  useEffect(() => {
    console.log(name)
  },[name]);

针对上述代码说明:
组件初始化会执行,相当于componentDidMount生命周期函数;
当name的useState改变时,才会会执行,相当于componentDidUpdate更新的生命周期函数;
当count的useState改变时,不会执行;

const [name, setName] = useState('Koli');
const [count, setCount] = useState(4);

  useEffect(() => {
    console.log(name,count)
  },[name,count]);

针对上述代码说明:
组件初始化会执行,相当于componentDidMount生命周期函数;
当name或者count的useState改变时,才会会执行,相当于componentDidUpdate更新的生命周期函数;

函数组件需要清除effect时,比如说订阅消息的,定时器的;

useEffect(() => {
	let timer = setTimeOut(() => {
		console.log('定时器时需要清除的..')
	},1000)
return () => {
	clearTimeout(timer );
}
},[])

针对上述的说明:
在这里插入图片描述