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

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.

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