Introduction to States React中的状态（State）与属性（Props）简介

欢迎学习 React 中的状态（State）！通过本视频，你将能够：

• 解释 Class 组件 中 State 的使用
• 解释 Class 组件 中 Props 的使用
• 比较并对比 State 和 Props

---

什么是 State？

State 允许你在应用中更改数据。它是 React 类组件 中用于跟踪应用状态的对象，包含多个键值对来表示你想要跟踪的数据。

State 的作用

• State 是一个普通的 JavaScript 对象，用来表示组件当前的状态。
• State 变化 会触发组件的重新渲染。
• State 管理：你可以在组件内部管理并保留状态对象，随着用户交互进行更新。

State 的分类

1. 局部状态（Local State）：只在单一组件中存在，无法被其他组件访问。

• 例如：一个展示/隐藏信息的组件使用局部状态。

2. 共享状态（Shared State）：多个组件可访问和修改的状态。

• 例如：在一个订单应用中，订单列表的状态通常是共享的。

State 的核心概念

1. State 是类的实例：每个 React 类组件都有一个内置的 state 对象。这个对象用于存储该组件的属性值。
2. 状态变更触发重新渲染：当 state 改变时，组件会重新渲染。
3. State 的管理：

• 使用 this.state 来初始化状态。
• 使用 this.setState() 来更新状态。

示例：简单的计数器应用

考虑一个包含按钮和计数器的简单应用。当用户按下按钮时，计数器变量增加 1，并且该值存储在状态中。以下是代码示例：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

📌 解释：

• this.state：用于存储 count 状态。
• this.setState：用于更新 count 值，并触发组件的重新渲染。

---

什么是 Props？

Props 是 React 中用于在组件之间传递数据的属性。它使得父组件能够将数据传递给子组件，并且是只读的。

Props 的作用：

• Props 用来从父组件向子组件传递数据。
• 它们是只读的，不能在子组件内修改。
• Props 可以传递 函数，使子组件调用父组件的方法。

示例：使用 Props

class TestComponent extends React.Component {
  render() {
    return <h1>{this.props.name}</h1>;
  }
}

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <TestComponent name="John" />
        <TestComponent name="Jill" />
      </div>
    );
  }
}

📌 解释：

• 父组件（ParentComponent）将 name 属性通过 Props 传递给 子组件（TestComponent）。
• 子组件使用 this.props.name 来访问并显示父组件传递的数据。

---

State 与 Props 的对比

关键区别：

• State 用于管理组件内部的数据和交互，而 Props 用于在父子组件之间传递不可变的数据。
• State 是组件的动态数据，随着用户交互和生命周期更新；而 Props 是静态数据，由父组件传递给子组件。

---

总结

在本视频中，你学习了以下内容：

1. State 是一个 JavaScript 对象，表示组件当前的状态。它允许你创建交互式的组件，并且状态的变化会导致组件重新渲染。
2. Props 用于在父组件与子组件之间传递数据，数据流动是单向的。
3. State 和 Props 的主要区别：

• State 用于组件内部管理动态数据，而 Props 用于父子组件之间的单向数据传递。
• State 可以修改并且影响组件行为，Props 是不可变的，只能读取。

通过理解 State 和 Props 的不同作用和使用方式，你可以更高效地构建 React 应用。 🚀