useState
-
目的：useState用于在函数组件中添加状态。之前，只有类组件才能有自己的状态，但useState钩子使得函数组件也能够利用React的状态特性。
-
使用场景：当你需要在组件中存储、读取或更新一些数据时使用。例如，控制输入框的内容、切换按钮的状态等。
-
工作原理：useState为组件提供了状态变量和一个更新这个状态的函数。当状态变化时，组件会重新渲染，以反映最新的状态。
useEffect
- 目的：useEffect用于在函数组件中执行副作用操作。副作用包括数据获取、订阅或手动修改DOM等，在React组件中这些操作通常在组件渲染完成后进行。
- 使用场景：主要用于处理组件的生命周期事件，如组件挂载（componentDidMount）、组件更新（componentDidUpdate）、组件卸载（componentWillUnmount）时的逻辑。
- 工作原理：useEffect接收两个参数：一个是包含副作用逻辑的函数，另一个是依赖数组。依赖数组中的任何值发生变化时，副作用函数就会执行。如果依赖数组为空，副作用函数仅在组件挂载和卸载时执行一次。
主要区别
-
用途不同：
useState 用于声明组件状态和修改状态。
useEffect用于执行副作用，如API调用、订阅或清理资源等。 -
执行时机不同：
useState 提供的状态和设置状态函数直接参与到组件的渲染逻辑中，状态更新会触发组件的重新渲染。
useEffect中的副作用通常在组件渲染到屏幕之后执行，不会直接影响组件的输出。但是，你可以通过副作用中的状态更新来间接触发重新渲染。 -
概念差异：
useState 是对组件内部状态的管理。
useEffect 是连接组件和外部世界的桥梁，用于处理组件的生命周期和副作用。通过结合useState和useEffect，可以在函数组件中实现丰富的功能和效果，使得函数组件的能力与类组件相当，甚至在某些方面更具优势。