React State(状态)学习笔记

在 React 中，组件状态 (State) 是管理和控制组件渲染和交互的重要机制之一。它是一个对象，包含组件内部数据和可变属性。当 State 改变时， React 会自动重新渲染组件，因此我们可以通过改变 State 的值来实现动态更新。

State 的基本使用

在类组件中，我们可以通过构造函数 constructor 初始化 State：

javascriptCopy Code
import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

上面的代码中，我们初始化了一个 State 变量 count，并在按钮中绑定了一个事件处理函数，当用户点击按钮时，State 变量 count 的值加 1，触发组件重新渲染。

State 的更新

React 推荐我们使用 setState 函数来更新 State。该函数接受一个对象或函数作为参数：

javascriptCopy Code
this.setState({ count: this.state.count + 1 });

或

javascriptCopy Code
this.setState(prevState => ({ count: prevState.count + 1 }));

第一种方式中，我们直接给 setState 函数传入一个对象，表示要更新的 State 变量及其值。

第二种方式中，我们传入了一个函数，它接受上一个 State 变量作为参数，并返回一个对象，表示要更新的 State 变量及其值。这种方式更适用于根据先前的 State 计算新的 State 的情况。

实例

下面是一个简单的示例，展示了如何使用 State 来实现一个带有删除功能的 Todo List：

javascriptCopy Code
import React, { Component } from 'react';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [
        { id: 1, text: 'Learn React' },
        { id: 2, text: 'Build a Todo List app' }
      ],
      inputValue: ''
    };
  }
  handleInputChange = e => {
    this.setState({ inputValue: e.target.value });
  }
  handleAddTodo = () => {
    const { todos, inputValue } = this.state;
    const newTodo = { id: todos.length + 1, text: inputValue };
    this.setState({ todos: [...todos, newTodo], inputValue: '' });
  }
  handleDeleteTodo = id => {
    const filteredTodos = this.state.todos.filter(todo => todo.id !== id);
    this.setState({ todos: filteredTodos });
  }
  render() {
    const { todos, inputValue } = this.state;
    return (
      <div>
        <ul>
          {todos.map(todo => (
            <li key={todo.id}>
              {todo.text}
              <button onClick={() => this.handleDeleteTodo(todo.id)}>X</button>
            </li>
          ))}
        </ul>
        <input value={inputValue} onChange={this.handleInputChange} />
        <button onClick={this.handleAddTodo}>Add Todo</button>
      </div>
    );
  }
}

在上述示例中，我们使用 State 变量 todos 存储 Todo List 中的所有项，使用 State 变量 inputValue 存储输入框中的值。当用户输入内容后，点击 Add Todo 按钮，使用 handleAddTodo 函数向 todos 数组中添加一项，并将输入框清空；当用户点击列表项后面的 X 按钮时，使用 handleDeleteTodo 函数过滤掉对应的列表项，并重新渲染 Todo List。

总结

React State 是组件内部管理数据和状态的重要机制，可以通过 setState 函数来改变 State 的值并触发组件重新渲染。我们可以使用 State 来实现各种功能，如：Todo List、计数器等等。