25、React开发：状态组件与事件处理详解

React开发：状态组件与事件处理详解

状态组件的数据提升

在React开发中，状态组件是具有自身数据值的组件，这些数据值可用于改变渲染输出。状态数据的管理是一个重要的方面，其中状态提升是一种常见的做法。

当把计数器状态属性提升到父组件时，同一表格行中的两个按钮会共享其父组件的状态数据。这意味着点击其中一个按钮元素会使两个按钮都得到更新。不过，并非所有的状态数据都需要提升，各个组件仍然可以有自己的局部状态数据，例如 hasButtonBeenClicked 属性就可以保持局部且独立于其他组件。

状态数据还可以进一步提升。若希望所有的 SimpleButton 和 HooksButton 组件共享相同的计数器属性，可以将其提升到 App 组件。以下是 App.js 文件的相关代码：

import React, { useState } from "react";
import { Summary } from "./Summary";
import ReactDOM from "react-dom";
let names = ["Bob", "Alice", "Dora"]
function reverseNames() {
    names.reverse();
    ReactDOM.render(<App />, document.getElementById('root'));
}
function promoteName(nam