揭秘 setState 运作原理：React 与 React DOM 的幕后协作

前端

2023-11-18 17:28:04

React 是一个广受欢迎的 JavaScript 库，用于构建用户界面。它的核心原则之一是声明式编程，它允许开发人员专注于应用程序的当前状态，而不是关注如何更新它。

当使用 React 时，我们使用 setState 方法更新组件状态。当组件状态发生变化时，React 会根据更新后的状态重新渲染组件。但问题来了，React 是如何知道何时需要更新组件的呢？

答案是：Virtual DOM。Virtual DOM 是 React 内部维护的组件状态的轻量级表示。当组件状态发生变化时，React 会将 Virtual DOM 与实际 DOM 进行比较，并确定需要更新哪些部分。

React 使用一种称为“调和”的过程来更新 DOM。调和是有效地应用 Virtual DOM 中更新的部分的过程，以使实际 DOM 与组件状态保持同步。

React DOM 在调和过程中扮演着至关重要的角色。它负责将 Virtual DOM 转换为实际 DOM，并管理与浏览器之间的交互。

React 和 React DOM 紧密协作，确保组件状态更新能够高效且准确地反映在实际 DOM 中。这种协作消除了直接操作 DOM 的需要，使 React 能够更轻松地维护应用程序状态并确保一致的 UI。

为了进一步理解 setState 的工作原理，让我们考虑一个简单的例子。假设我们有一个组件，当用户单击按钮时，它会切换一个布尔值 clicked。

import React, { useState } from 'react';

const MyComponent = () => {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(true);
  };

  return (
    <div>
      <h1>{clicked ? 'Thanks' : 'Click me'}</h1>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};

export default MyComponent;