React 和 ReactDOM 是如何工作的？

React 是一个用于构建用户界面的 JavaScript 库。它将 UI 抽象成一个组件树，每个组件都拥有自己的状态和生命周期方法。

ReactDOM 是 React 渲染库，它是 React 库的一部分，用于将组件渲染成可操作的 HTML 让浏览器能够显示。以下是它们是如何工作的步骤：

1. 创建组件

首先, 我们需要创建 React 组件。组件定义了页面中的 UI 元素和行为。我们使用类组件或函数组件来定义它们。以下是定义一个简单的函数式组件的示例：

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

这个组件接收一个名为 props 的参数，它包含组件需要的一些数据。

2. 渲染组件

我们可以使用 ReactDOM 将组件渲染成 HTML。以下是渲染上面定义的组件的示例：

ReactDOM.render(
  <Welcome name="John" />,
  document.getElementById('root')
);

这将在页面上渲染出 "Hello, John!" 的标题。

3. 更新组件

当组件的状态或属性更改时，ReactDOM 将重新渲染组件，使其呈现新的 UI。以下是通过更改组件属性来更新组件的示例：

function App() {
  const [name, setName] = useState('John');
  
  return (
    <div>
      <button onClick={() => setName('Jane')}>Change name</button>
      <Welcome name={name} />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

当我们在页面上点击 "Change name" 按钮时，组件将使用 Jane 而不是 John 重新渲染。

4. 卸载组件

最后，我们可以使用 ReactDOM.unmountComponentAtNode() 来卸载组件并清除其所有事件、监听器和内存空间。以下是卸载组件的示例：

function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      {show && <Welcome name="John" />}
      <button onClick={() => setShow(false)}>Unmount component</button>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

// 卸载组件
ReactDOM.unmountComponentAtNode(document.getElementById('root'));

以上就是 React 和 ReactDOM 的基本工作原理。由于 React 是非常灵活和可扩展的，我们可以使用它来构建各种不同类型的应用程序。