一、理解

在 React 中，“props” 是 “properties” 的缩写，是一种用于传递数据和配置信息给组件的机制。Props 是 React 组件之间通信的主要方式之一。

二、用途

它有以下几个主要用途：

1. 传递数据: 通过 props，父组件可以向子组件传递数据。子组件可以通过访问 props 的方式获取这些数据，并在组件内部使用。这样可以实现将数据从一个组件传递到另一个组件，从而实现动态渲染和展示不同的内容。

2. 配置组件: 通过 props，您可以向组件传递配置信息，以便根据不同的需求进行自定义。例如，您可以向一个通用的按钮组件传递文本、样式和点击处理函数，使得按钮可以在不同的上下文中重用，并且可以以不同的方式呈现。

3. 组件间通信: 在 React 应用中，不同的组件可能需要进行通信和协作。通过使用 props，您可以将数据从一个组件传递给另一个组件，实现组件间的通信和数据传递。

4. 动态渲染: 使用 props，您可以根据不同的数据和状态动态地渲染组件。这使得您可以根据用户操作、数据变化或应用状态的变化，以不同的方式呈现组件的内容。

5. 单向数据流: 在 React 中，数据流是单向的，即数据从父组件通过 props 传递到子组件，子组件不能直接修改父组件的数据。这有助于维护应用的可预测性和可维护性。

6. 性能优化: 使用 props，React 可以有效地进行虚拟 DOM 的比较和更新。当 props 发生变化时，React 可以智能地决定是否需要重新渲染组件，从而在性能方面进行优化。

总之，props 是 React 组件之间传递数据和配置信息的一种重要机制，它有助于构建可组合、可复用和可维护的组件化应用。通过使用 props，您可以将数据从父组件传递到子组件，实现组件间的通信和数据流动。

三、使用

3.1、子类使用父类定义的props

当子组件需要使用父组件的 props 时，您只需要在子组件中通过 this.props 来访问父组件传递的数据。以下是一个使用父组件的 props 的示例：

import React, { Component } from 'react';// 父组件
class ParentComponent extends Component {constructor(props) {super(props);this.state = {message: "Hello from parent!",};}render() {return (<div><ChildComponent message={this.state.message} /></div>);}
}// 子组件
class ChildComponent extends Component {render() {// 子组件通过 this.props.message 访问父组件传递的数据return (<div><p>{this.props.message}</p></div>);}
}export default ParentComponent;

在上面的示例中，ParentComponent 是父组件，它包含了一个名为 message 的状态，然后将这个状态作为 props 传递给子组件 ChildComponent。子组件中通过 this.props.message 来访问并显示这个消息。

当 ParentComponent 渲染时，它会将当前状态的 message 传递给 ChildComponent，然后 ChildComponent 使用这个 message 来渲染自己的内容。这就是子组件如何使用父组件的 props 数据的示例。

需要注意的是，如果您使用函数组件编写子组件，那么不需要使用 this.props，而是可以直接在函数参数中访问 props，如下所示：

import React from 'react';function ChildComponent(props) {// 在函数组件中，可以直接通过 props.message 访问父组件传递的数据return (<div><p>{props.message}</p></div>);
}export default ChildComponent;

这是函数组件中访问 props 的方式。无论使用类组件还是函数组件，子组件都可以轻松地使用父组件传递的 props。

3.2、子函数使用父函数的props

在 React 中，使用 props 通过父组件向子组件传递数据和配置信息。下面是如何使用 props 的基本步骤：

1. 定义父组件：首先，您需要创建一个父组件，通常是一个包含要传递数据的组件。

2. 在父组件中设置 props：在父组件的 JSX 中，使用属性的方式为子组件传递数据。例如：

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const message = "Hello from parent!";return (<div><ChildComponent message={message} /></div>);
}export default ParentComponent;

3. 接收 props 在子组件中：在子组件的代码中，通过函数参数的方式接收传递的 props 数据。这些 props 将会作为对象传递给组件函数。

// ChildComponent.js
import React from 'react';function ChildComponent(props) {return (<div><p>{props.message}</p></div>);
}export default ChildComponent;

在上面的示例中，父组件 ParentComponent 通过将名为 message 的数据传递给子组件 ChildComponent。子组件中通过 props.message 来访问传递过来的数据。

需要注意的是，props 是只读的，子组件不能直接修改它们。它们在组件的整个生命周期内保持不变。如果需要在子组件中进行修改，可以将数据转换为状态（state）或使用回调函数等方式实现。

此外，还可以传递其他类型的数据，如函数、对象等，以及多个 props。在子组件中，您可以通过 props 对象来访问这些传递的数据。

总结起来，使用 props 是一种将数据从父组件传递到子组件的重要机制，用于实现组件之间的通信和数据传递。

3.3、动态设置props内的值

动态设置 props 内的数据通常是通过在父组件中根据不同的情况生成不同的数据，然后将这些数据作为 props 传递给子组件。这可以实现根据应用的状态或用户交互来动态更新子组件的内容。

以下是一个示例，演示如何动态设置 props 内的数据：

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const [count, setCount] = useState(0);// 根据 count 动态生成 messageconst message = `Count is ${count}`;return (<div><button onClick={() => setCount(count + 1)}>Increment Count</button><ChildComponent message={message} /></div>);
}export default ParentComponent;

// ChildComponent.js
import React from 'react';function ChildComponent(props) {return (<div><p>{props.message}</p></div>);
}export default ChildComponent;

在上面的示例中，父组件 ParentComponent 中有一个状态 count，每次点击按钮时都会增加。根据这个 count，父组件动态生成了一个 message 字符串，然后将这个字符串作为 props 传递给子组件 ChildComponent。子组件会显示这个动态生成的 message。

通过类似的方式，您可以根据应用的状态、用户输入、API 响应等动态生成不同的数据，然后将其传递给子组件，从而实现动态更新子组件的内容。这种模式在构建动态和交互性的应用中非常有用。

3.4、state 和 props 一起使用

state 一般使用props 内的参数做初始化。

演示了在子组件中不使用自己的 state，而是直接使用父组件传递的 props：

import React, { Component } from 'react';class ParentComponent extends Component {constructor(props) {super(props);this.state = {count: props.initialCount,};}incrementCount = () => {this.setState((prevState) => ({count: prevState.count + 1,}));};render() {return (<div><p>Parent Count: {this.state.count}</p><ChildComponent count={this.state.count} incrementCount={this.incrementCount} /></div>);}
}function ChildComponent(props) {return (<div><p>Child Count from Parent: {props.count}</p><button onClick={props.incrementCount}>Increment Parent Count</button></div>);
}class App extends Component {render() {return <ParentComponent initialCount={5} />;}
}export default App;

ChildComponent 直接使用从父组件传递的 count，并通过 props 调用 incrementCount 方法来更新父组件的状态。
这种方式更加简洁和清晰，适用于子组件只需要访问父组件传递的数据而不需要维护独立状态的情况。

3.5、props 改变可以通知 state 变化的例子

是的，当通过 props 初始化子组件的 state 后，如果父组件中的 props 发生变化，这些变化不会自动反映在子组件的 state 中。子组件的 state 仅在组件初始化时由 props 初始化，以后的 props 变化并不会自动更新子组件的 state。

如果你希望子组件能够在接收到新的 props 后更新自己的 state，你可以使用 componentDidUpdate 生命周期方法来监听 props 的变化并手动更新子组件的 state。以下是一个示例：

import React, { Component } from 'react';class ChildComponent extends Component {constructor(props) {super(props);this.state = {localData: props.data,};}componentDidUpdate(prevProps) {// 在 props 更新时更新子组件的内部状态if (prevProps.data !== this.props.data) {this.setState({localData: this.props.data,});}}render() {return (<div><p>Local Data in Child: {this.state.localData}</p></div>);}
}class ParentComponent extends Component {constructor(props) {super(props);this.state = {data: 'Initial Data',};}changeData = () => {this.setState({data: 'Updated Data',});};render() {return (<div><button onClick={this.changeData}>Change Data</button><ChildComponent data={this.state.data} /></div>);}
}export default ParentComponent;

在上面的示例中，当父组件的 data 改变时，点击按钮会触发父组件的 changeData 方法，更新了父组件的 data。虽然父组件的 data 改变了，但子组件的 state 并不会自动更新。子组件通过监听 componentDidUpdate，在父组件的 data 变化时更新自己的 state。

需要注意的是，为了避免不必要的 state 更新，你应该仅在需要时手动更新子组件的 state，而不是在每次 props 变化时都更新。

四、将属性（props）传递给组件

在 React 中，有多种方式可以将属性（props）传递给组件。以下是一些示例：

1. 直接传递值：最简单的方式是将属性值直接传递给组件。

<MyComponent name="John" age={30} />

2. 使用变量传递值：您可以将变量的值作为属性传递给组件。

const name = "John";
const age = 30;
<MyComponent name={name} age={age} />

3. 使用对象传递多个属性：如果要传递多个属性，可以将它们组织为一个对象并传递给组件。

const person = {name: "John",age: 30,
};
<MyComponent person={person} />

4. 使用 JavaScript 表达式传递值：您可以在属性值中使用 JavaScript 表达式。

<MyComponent name={2 + 2} age={getAge()} />

5. 使用条件表达式传递值：您可以根据条件动态传递属性。

const isAdult = true;
<MyComponent name="John" age={isAdult ? 30 : 15} />

6. 使用 map 函数传递多个组件：如果要传递多个相同类型的组件，可以使用 map 函数来生成它们。

const names = ["John", "Alice", "Bob"];
const components = names.map((name, index) => <MyComponent key={index} name={name} />);

7. 解构传值

如果你要传递属性（props）以对象解构的方式，你可以在父组件中传递一个包含多个属性的对象，然后在子组件中使用对象解构来获取这些属性。以下是一个示例：

首先，在父组件中定义一个包含多个属性的对象，并将该对象传递给子组件：

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const person = {name: "John",age: 30,city: "New York",};return (<div><ChildComponent {...person} /></div>);
}export default ParentComponent;

在这个示例中，ParentComponent 传递了一个名为 person 的对象作为属性给 ChildComponent，并使用 {...person} 语法来将该对象的属性解构传递给子组件。

然后，在子组件中，可以使用对象解构来获取传递的属性：

// ChildComponent.js
import React from 'react';function ChildComponent({ name, age, city }) {return (<div><p>Name: {name}</p><p>Age: {age}</p><p>City: {city}</p></div>);
}export default ChildComponent;

在 ChildComponent 中，我们使用对象解构将父组件传递的属性分别解构为 name、age 和 city。然后，可以直接使用这些变量来访问和显示这些属性的值。

这种方式使代码更简洁和可读，特别是在需要传递多个属性并在子组件中使用它们时。

参考地址

转：https://juejin.cn/post/7015402441298411533

https://www.bilibili.com/video/BV1wy4y1D7JT/?spm_id_from=333.337.search-card.all.click&vd_source=8ac97496e3a9e47d15f8bdfb630e596a