在React中，props(属性)和state(状态)是两个非常重要的概念。

props用于向组件传递数据，而state用于在组件内部存储和管理数据。

正确使用props和state可以提高代码质量和性能，使组件更健壮、更可维护。

1. prop的使用 props是父组件向子组件传递数据的一种方式。

在父组件中，我们可以通过的形式为子组件传递数据。

在子组件中，我们可以通过this.props.data来访问这些数据。

下面是一个简单的例子：

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    return (
      

        
父组件
        
      
    );
  }
}

export default ParentComponent;

import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      

        
子组件
        
接收到的数据：{this.props.data}
      
    );
  }
}

export default ChildComponent;

2. state的使用 state用于在组件内部存储和管理数据。

在类组件中，我们可以使用this.state来定义和修改state。

在函数组件中，我们可以使用useState Hook来定义和修改state。

下面是一个简单的例子：

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0, // 定义一个名为count的状态变量，初始值为0
    };
  }

  incrementCount = () => { // 定义一个名为incrementCount的方法，用于增加count的值
    this.setState(prevState => ({ count: prevState.count + 1 })); // 使用setState更新state的值
  };

  render() {
    return (
      

        
父组件
        增加计数
         // 将子组件挂载到DOM上，使其能够访问到父组件的state和props中的数据和方法
      
    );
  }
}

import React from 'react';
import ChildComponent from './ChildComponent';

class ChildComponent extends React.Component {
  render() {
    return (
      

        
子组件
        
当前计数：{this.props.count}
 // 通过props访问父组件传递过来的数据和方法中的数据和方法
      
    );
  }
}

在React中正确使用props和state的实用指南 - 集智数据集