使用useEffect hook来代替useState hook在组件初始化时执行操作。
示例代码:
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 此处没有依赖项,会在每次组件渲染时被调用,包括初始化
useEffect(() => {
console.log('componentDidMount or componentDidUpdate');
});
// 此处有count作为依赖项,只会在count变化时被调用
useEffect(() => {
console.log('count has changed');
}, [count]);
return (
You clicked {count} times
);
}
在上述示例中,我们使用了useEffect hook来替换了在组件初始化时使用useState hook的操作。在第一个useEffect中,我们没有设置依赖项,这意味着它会在每次组件渲染时被调用,包括初始化。而第二个useEffect中,我们将count作为依赖项,这意味着它只会在count变化时被调用。