9、React Hooks 状态管理与性能优化

React Hooks 状态管理与性能优化

1. 解决 useEffect 异步函数问题

在使用 useEffect 时，不能直接传入标记为 async 的函数。可以采用嵌套异步函数的方式解决，示例代码如下：

useEffect(() => {
    async function getThePerson() {
        const person = await getPerson();
        console.log(person);
    }
    getThePerson();
}, []);

不过这种实现方式的可读性可能不如初始版本，可切换回初始版本继续后续操作。

1.1 useEffect 总结

• useEffect 用于在组件渲染或某些 props 或状态改变时执行组件副作用。
• 常见用例包括数据获取和手动注册 DOM 事件。
• 可以在 useEffect 返回的函数中进行副作用清理。

2. 使用 useState 管理状态

useState 允许在变量中定义状态，语法如下：

const [state, setState] = use