网站案例比较多的公司百度指数有三个功能模块
在 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 的值会更新，触发重新渲染。
总结
props用于父组件传递数据给子组件，不可变。state用于管理组件自身的动态数据，可变，组件内部可更新其state并触发重新渲染。props和state在 React 中具有不同的用途和应用场景：props用于组件间的通信，而state用于组件内部的状态管理。
希望这个解释和代码示例能够帮助你更好地理解 state 和 props 之间的区别及其应用场景！