代码之家 › 专栏 › 技术社区 › temporary_user_name

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

react-hooks reactjs

temporary_user_name · 技术社区 · 6 年前

基本上我想知道这两件事有什么不同:

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

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

1 回复 | 直到 6 年前

Arnaud Claudel 6 年前

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 关于事件循环如果您想清楚地了解这个

推荐文章

Scott Chambers · React和Electron应用程序提示我使用了无效的钩子调用

1 年前

Ali Navidi · 为什么在使用计算量大的useTransition时isPending没有立即变为true?

1 年前

nammae88 · React访问其他组件DOM节点

1 年前

masoud khanlo · axios实例的React useState问题

1 年前

lrr59 · 复制项目旁边的项目不会相应地工作

1 年前

awdreg · reactjs-useEffect未获取状态变量的更新值?

1 年前

Romn · 推送使用状态数组在React中不起作用

1 年前

pareshaann · 由于useEffect钩子,在react中无限重渲染

1 年前

Kevin Mosley · React:从本地存储读取映射返回null值

1 年前

Na N · 为什么ReactJS没有将数组中的更改反映到我的UI中?

1 年前