在 ReactJS 中提升状态

在 React 中，一个组件可以拥有自己的状态（state），这个状态只在该组件内部使用，并不能被其他组件所访问到。如果我们需要让多个组件共享一份状态，我们可以使用状态提升（lifting state up）的方式来实现。

状态提升的概念

状态提升是指将组件的状态提升到其父组件中，使得父组件可以传递状态给子组件。这样，多个拥有同样状态的组件就可以共享这份状态，避免了状态的冗余，提高了组件的复用性。

示例

假设我们有一个简单的 Todo List 应用，包含两个组件：AddTodo 和 TodoList。AddTodo 是用来添加新的 Todo 项的，TodoList 是用来展示已有的 Todo 项的。

AddTodo

AddTodo 是一个简单的表单组件，用来添加新的 Todo：

import React, { Component } from 'react';

class AddTodo extends Component {
  state = { todo: '' };

  handleChange = event => {
    this.setState({ todo: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    this.props.onAdd(this.state.todo);
    this.setState({ todo: '' });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.todo}
          onChange={this.handleChange}
          placeholder="Add New Todo"
        />
        <button>Add</button>
      </form>
    );
  }
}

export default AddTodo;

TodoList

TodoList 是展示已有的 Todo 项的组件，它接收一个 todoList 的 prop，这个 prop 包含所有的 Todo 项：

import React from 'react';

const TodoList = ({ todoList }) => (
  <ul>
    {todoList.map((todo, index) => (
      <li key={index}>{todo}</li>
    ))}
  </ul>
);

export default TodoList;

App

现在让我们来把这两个组件组合起来，实现一个完整的 Todo List 应用：

import React, { Component } from 'react';
import AddTodo from './AddTodo';
import TodoList from './TodoList';

class App extends Component {
  state = { todos: [] };

  handleAddTodo = todo => {
    this.setState(state => ({ todos: [...state.todos, todo] }));
  };

  render() {
    return (
      <div>
        <h1>Todo List</h1>
        <AddTodo onAdd={this.handleAddTodo} />
        <TodoList todoList={this.state.todos} />
      </div>
    );
  }
}

export default App;

在 App 的 state 中添加了一个 todos 数组，用来存储所有的 Todo 项。当用户添加新的 Todo 项时，我们将新的项添加到 todos 数组中，并通过 props 将 todos 数组传递给 TodoList 组件。

总结

状态提升是 React 中非常重要的概念，它可以帮助我们避免状态的冗余，提高组件的复用性。当多个组件需要共享同一份数据时，我们应该考虑使用状态提升的方式来实现。