Question

此代码：

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调用的数量。所以我很困惑...

Answer 1

在React js中，渲染方法调用了每个属性更改，但没有其他方法，例如componentDidmount，WillMount等，在更新React中将React Hooks与功能组件一起使用。只需一个函数即可解决此问题，请在此处摘录或访问链接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>
    )
}

反应太多渲染

1 个答案: