从项目代码看 React：State 和 Props 的区别及应用场景实例讲解

在 React 中，state 和 props 是组件的两个重要概念，它们有不同的作用和应用场景。理解它们之间的区别对于开发 React 应用至关重要。

1. `state` 和 `props` 的区别

props (属性)：
- props 是由父组件传递给子组件的数据或函数。
- props 是只读的，子组件不能修改父组件传递给它的 props。它只能接收和使用这些数据。
- props 用来传递数据和回调函数，子组件通过 props 获取父组件传递的值。
state (状态)：
- state 是组件内部管理的状态，用于存储组件本地的数据。
- state 是可变的，组件内部可以通过 this.setState() 来更新状态，并触发组件重新渲染。
- state 用于存储组件需要动态变化的数据，并根据这些数据决定渲染内容。

2. `state` 和 `props` 的应用场景

props 的应用场景：
- props 主要用于父组件向子组件传递数据，或者在子组件中执行父组件传递的回调函数。
- 适用于组件间数据传递的场景，比如父子组件间的交互。
state 的应用场景：
- state 用于管理组件内部的可变数据，适用于组件需要在不同状态下渲染不同内容的场景。
- 比如，表单输入、用户点击操作、动态显示等场景。

3. 通过实际项目代码讲解 `state` 和 `props` 的应用

假设我们正在开发一个简单的计数器应用。我们有两个组件：一个是父组件 App，另一个是子组件 Counter，用于显示和增加计数值。

代码示例：使用 `props` 和 `state` 的计数器应用

import React, { Component } from 'react';

// 子组件：计数器
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,  // 组件内部的状态
    };
  }

  // 增加计数
  increment = () => {
    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <h2>Current Count: {this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
        <h3>Message from parent: {this.props.message}</h3> {/* 使用父组件传递的 props */}
      </div>
    );
  }
}

// 父组件：App
class App extends Component {
  render() {
    return (
      <div>
        <h1>React Props and State Example</h1>
        <Counter message="Hello from App!" />  {/* 通过 props 传递数据 */}
      </div>
    );
  }
}

export default App;

4. 代码解析

`props` 在应用中的使用：

message 是从父组件 App 传递给子组件 Counter 的 props。子组件通过 this.props.message 来访问该值。
- 这里，message="Hello from App!" 就是父组件传递给子组件的 props 数据。
- 在 Counter 组件中，this.props.message 用于显示父组件传递的信息。
父子组件的传递数据：
- props 的作用是让父组件将数据传递给子组件，子组件不能修改父组件传递的数据，它只能接收并展示这些数据。

`state` 在应用中的使用：

count 是 Counter 组件的内部状态，它用来表示计数器的当前值。
- state 用于存储组件内部的可变数据。每当 state 更新时，React 会重新渲染组件。
- this.state.count 存储计数器的值，点击按钮时，通过 this.setState 来更新 count 的值，触发重新渲染。
更新 state 并重新渲染：
- 当用户点击 Increment 按钮时，increment 方法会被调用，这会更新 state 中的 count，导致组件重新渲染，显示新的计数值。

5. 应用场景总结

props：
- 父组件向子组件传递数据。
- 子组件通过 props 接收父组件的数据并展示。
- props 适用于组件间的数据传递和函数回调，子组件不能修改 props。
state：
- 管理组件内部的动态数据。
- 在组件中使用 state 存储和管理用户交互、数据变化等信息。
- 适用于需要变更组件状态并触发重新渲染的场景。

6. 实际项目中的应用

在一个真实的项目中，props 和 state 的使用是非常常见的。比如，在一个购物车应用中：

props：用来传递商品数据、用户信息、购物车状态等给子组件，子组件根据 props 渲染 UI。
state：用来管理用户的购物车状态，比如商品数量、总价等，当用户点击加减按钮时更新 state，然后重新渲染 UI。

例如，在购物车组件中，state 用于存储商品数量，props 用于传递商品的详细信息和价格。

// 购物车组件示例
class CartItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quantity: this.props.quantity,  // 从父组件传递的 props
    };
  }

  incrementQuantity = () => {
    this.setState(prevState => ({
      quantity: prevState.quantity + 1,
    }));
  };

  render() {
    const { name, price } = this.props;
    return (
      <div>
        <h3>{name}</h3>
        <p>Price: ${price}</p>
        <p>Quantity: {this.state.quantity}</p>
        <button onClick={this.incrementQuantity}>Add one more</button>
      </div>
    );
  }
}

在这个例子中，name、price 是通过 props 传递的，而 quantity 是通过 state 在组件内部管理的。当用户点击 “Add one more” 按钮时，quantity 的值会更新，触发重新渲染。