Question

基本上我想知道这两件事之间有什么区别：

const myComponent = (props) => {
    console.log('hi');
    return (
        <div>props: {props}</div>
    );
};

const myComponent = (props) => {
    useEffect(() => {
        console.log('hi');
    });
    return (
        <div>props: {props}</div>
    );
};

在每种情况下触发日志语句的确切原因是什么？

Answer 1

useEffect将延迟日志，因为它不会立即执行。

请参见以下示例：

const MyComponent1 = () => {
    console.log('Hello');
    console.log('World');
    return (
        <div></div>
    );
};

这将输出Hello world


const MyComponent2 = () => {
    useEffect(() => {
        console.log('Hello');
    });
    console.log("world")
    return (
        <div></div>
    );
};

这将输出world Hello。

如果您想对此事件有一个清晰的了解，请观看有关事件循环的精彩video

useEffect和功能组件主体中的代码有什么区别？

1 个答案: