My App

useEffect 钩子

useEffect 钩子

关于速度/性能的澄清

在上面的视频中,我提到更新标题并不是实时的。我意识到你可能会认为这个延迟是由 useEffect 引起的,因为 useEffect 在渲染后触发。

实际上,useEffect 几乎是瞬时触发的。延迟可以忽略不计,通常小于一毫秒。

那为什么会有延迟呢?当我们更新 document.title 时,浏览器不会立即将更改传播到标签的标题。我不太确定原因,但每当我们更改文档的标题时,总会有一些延迟。

玩这个例子

这个例子的棘手之处,以及我在本地代码编辑器中进行操作的原因,是在本课程的互动沙盒中,文档的标题是不可见的。😅

我还是在下面包含了沙盒,并添加了一个 console.log 来显示新值。如果你真的想深入了解这个例子,也欢迎在你的机器上本地运行代码。

import React from 'react';

import Counter from './Counter'

function App() {
  const [name, setName] = React.useState('Yuka');
  
  return (
    <>
      <Counter name={name}/>
    </>
  );
}

export default App;

严格模式的陷阱

在我们深入讨论 useEffect 之前,我想提到一个非常常见的绊脚石。

当你在这个课程平台之外使用 React 时,你可能会注意到一些有趣的事情:Effect似乎在组件首次挂载时运行了两次。

这是由于一个称为严格模式的设置。在严格模式下,React 会在我们开发应用程序时自动重新运行某些代码块。这是为了突出潜在问题。

目前,此课程平台上的严格模式已禁用。在接下来的几节课中,我们将学习严格模式的所有内容,从那时起,它将在本课程的所有沙箱中启用。

On this page