不可变性重访

这是视频中的可视化。您可以通过“”图标将可视化重置为初始状态。(没办法复现, 仅图片)

screenshot-20250228-095805

这是视频中的沙盒，展示了代码是如何工作的：

import React from 'react';

const INITIAL_STATE = { name: 'Ivy' };
window.stateValues = [INITIAL_STATE];

function App() {
  const [user, setUser] = React.useState(
    INITIAL_STATE
  );

  return (
    <>
      <button
        onClick={() => {
          const nextUser = {
            name: generateNewName(),
          };
          
          setUser(nextUser);
          window.stateValues.push(nextUser);
        }}
      >
        Edit name
      </button>

      <div>{JSON.stringify(user, null, 2)}</div>
    </>
  );
}

const NAMES = [
  'Kai',
  'Ivy',
  'Ava',
  'Leo',
  'Ada',
  'Mae',
  'Mia',
  'Anna',
  'Cal',
  'Ram',
  'Sri',
  'Sai',
  'Adi',
  'Jay',
  'Ren',
  'Aoi',
  'Ryo',
];

function generateNewName() {
  return NAMES[
    Math.floor(Math.random() * NAMES.length)
  ];
}

export default App;

Open Sandbox

这些快照究竟是什么？

在上面的演示中，我展示了“快照”，它们以卡片的形式出现，包含状态的片段。

在本课程中，我使用“快照”一词来表示执行渲染的结果。这是两件事的结合：

渲染发生时任何属性/状态的具体值
从组件返回的 React 元素，描述在渲染中计算的 UI。

我上面的演示没有显示元素，因为我们专注于状态。

值得回顾一下第二模块的“核心 React 循环”课程。我们会更深入地探讨这个想法！

您可能还会想知道：快照和实例之间有什么区别？

正如我们在“组件实例”课程中所学的，组件实例是一个 JavaScript 对象，它是与组件的特定实例相关的所有内容的“真相来源”。当组件挂载时创建它，并且它在组件卸载之前一直存在。

快照，相较之下，并不是一个特定的 JavaScript 对象。它是一个更抽象/隐喻的概念。它指的是某一时刻可用的数据。

所以，我们可以说一个实例持有一个状态的真实值，但每当该状态改变时，我们会创建一个快照，捕捉该状态变量的当前值。

我意识到在本课程中我给你们介绍了很多术语：组件、元素、实例和快照。如果这些概念在你脑中并没有完全明了也没关系！我们的目标是随着我们对 React 的了解越来越多，逐渐建立对我们理解的信心。

React 文档也可以帮助巩固这些内容。查看“State as a Snapshot”。

不可变性重访

视频摘要

这些快照究竟是什么？

On this page