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;

Open Sandbox

严格模式的陷阱

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

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

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

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

useEffect 钩子

视频摘要

玩这个例子

严格模式的陷阱

On this page