反应过多的渲染图

问题描述 投票:0回答:1

此代码:

const TooMany = () => {
    const [count, setCount] = useState(0);

    const foo = (param) => {
        console.log("Called twice")
        return param;
    }

    let bar = foo(1);

    return (
        <div>
            TEST
        </div>
    )
}

运行foo两次。为什么?我的猜测是第二个是由useState触发的,但是当我创建另一个useState时,它并没有增加foo调用的数量。所以我很困惑...

reactjs
1个回答
0
投票

在React js中,Render方法调用了每个属性更改,但没有其他方法(例如componentDidmount,WillMount等)在更新React中使用了带有功能组件的React Hooks。只需一个函数即可解决它的“ useEffect”,此处的代码段或访问链接Codesandbox

const TooMany = () => {
    const [count, setCount] = useState(0);

    const foo = (param) => {
        console.log("Called twice")
        return param;
    }

    useEffect(()=>{
       let bar = foo(1);
    },[])

    return (
        <div>
            TEST
        </div>
    )
}
© www.soinside.com 2019 - 2024. All rights reserved.