React 状态提升是一种常见的组件设计模式，它允许子组件将状态提升到父组件，以便多个子组件可以共享和访问同一状态。这种模式有助于保持组件之间的解耦，并简化状态管理。

状态提升的步骤

  1. 确定共享状态：首先，确定哪些状态需要在多个组件间共享。
  2. 创建状态提升的组件：创建一个父组件，用于存储和管理共享状态。
  3. 传递状态到子组件：通过 props 将状态从父组件传递到子组件。
  4. 更新状态：当状态需要更新时，在父组件中处理更新逻辑。

例子

假设我们有一个应用，其中包含多个列表组件，它们都需要显示相同的用户列表。我们可以通过状态提升来简化设计。

// App.js
import React, { useState } from 'react';
import UserList from './UserList';

function App() {
  const [users, setUsers] = useState(['Alice', 'Bob', 'Charlie']);

  return (
    <div>
      <UserList users={users} />
      <UserList users={users} />
    </div>
  );
}

export default App;

// UserList.js
import React from 'react';

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user}>{user}</li>
      ))}
    </ul>
  );
}

export default UserList;

扩展阅读

更多关于 React 状态提升的信息，可以参考我们的 React 状态管理指南。

React 状态提升