useEffect
Hook 是 React 中用于处理副作用操作的重要工具。它在函数式组件中取代了类组件中的生命周期方法(componentDidMount
、componentDidUpdate
、componentWillUnmount
)的功能,用于执行那些不直接与渲染相关的操作。
基本用法
useEffect(() => { // 副作用操作 console.log('Component did mount or update'); // 返回的函数用于清理操作(componentWillUnmount) return () => { console.log('Component will unmount'); }; }, [dependencies]);
参数说明:
- 副作用操作: 在
useEffect
的第一个参数中放入需要执行的副作用操作,可以是数据获取、订阅事件、手动操作 DOM 等。 - 依赖数组: 作为
useEffect
的第二个参数,它是一个数组,包含影响副作用操作的变量。当这些变量发生变化时,useEffect
将重新执行。如果省略该参数,副作用操作将在每次渲染时都执行。
副作用操作的示例:
useEffect(() => { const fetchData = async () => { const response = await fetch('https://api.example.com/data'); const data = await response.json(); // 处理获取的数据 }; fetchData(); }, []); // 空数组表示仅在组件挂载时执行
注意事项:
- 依赖数组: 如果省略依赖数组,
useEffect
中的副作用操作将在每次组件渲染时都执行。如果提供了依赖数组,确保仔细考虑数组中的变量,以避免不必要的执行。 - 清理操作: 返回的清理函数用于处理在组件卸载时的清理操作。这对于取消订阅、清除定时器等很有用。
useEffect
是处理副作用操作的强大工具,它使得在函数式组件中进行数据获取、订阅事件等异步和非渲染操作更加简便和灵活。