props 和 state 有什么区别？

你有没有想过我们如何在 ReactJS 中的组件之间传递数据?我们可以使用 Props 和 State 在组件之间传递数据。那么，让我们知道如何使用 props 和 state 传递数据并了解两者之间的区别。

我们将借助 ReactJS 中的示例项目了解 props 和 state。

创建 React 项目的步骤：

• 步骤 1：使用以下命令创建 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹 ie foldername 后，使用以下命令移动到它：

  cd foldername

项目结构：

项目结构

道具：道具被称为属性，可用于将数据从一个组件传递到另一个组件。 props 不能修改，只读，不可变。

示例：使用以下代码修改默认代码。

App.js

import Fruit from './Fruit'
function App() {
    
  const fruits=
    {
    name:"Mango",
    color:"Yellow"
    }
  
  return (
    

      
    
  );
}
  
export default App;

应用程序.css

.App{
  text-align: center;
    
}

创建一个名为 Fruit.js 的组件并添加以下代码

Fruit.js

import React from "react"
  
const Fruit =(props) =>{
  
   return(
       

           
List of Fruits
           
Name: {props.fruits.name}
           
Color: {props.fruits.color}
       
  
   )
}
  
export default Fruit;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm startOutput:

以下将是我们执行上述命令时的输出。数据将从父组件(即 App.js)传递到子组件(即 Fruit.js)，并使用“道具”功能。

状态：状态表示应用程序中可以更改的部分。每个组件都可以有它的状态。状态是可变的，并且它仅对组件是本地的。

示例：让我们在同一个项目“fruits”中创建一个名为 Car.js 的 Class 组件。

在 Car.js组件中添加以下代码。

Car.js

import React, {Component} from "react"
  
class Car extends Component{
    constructor() {
        super()
        this.state={
            car: 'Ferrari'
        }
    }
  
    changeMessage() {
        this.setState({
            car: 'Jaguar'
        })
    }
  
      
  
  
    render() {
        return (
            

                
{this.state.car}
                 this.changeMessage()}>
                  Change
                  
            
          
        )
    }
}
  
export default Car

应用程序.js

import './App.css';
import Fruit from './Fruit'
import Car from './Car';
  
function App() {
    
  const fruits=
    {
    name:"Mango",
    color:"Yellow"
    }
  
  return (
    

      
      

      
    
  );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序：

npm start

输出：

以下将是我们执行上述命令时的输出。该数据仅适用于组件“Car” ，并且可以使用屏幕中的按钮更改进行更新。

props 和 state 的区别：

PROPS	STATE
The Data is passed from one component to another.	The Data is passed within the component only.
It is Immutable (cannot be modified).	It is Mutable ( can be modified).
Props can be used with state and functional components.	State can be used only with the state components/class component (Before 16.0).
Props are read-only.	State is both read and write.

讨论要点：

1. 道具用于将数据从一个组件传递到另一个组件。
2. 状态是一个本地数据存储，只对组件是本地的，不能传递给其他组件。
3. this.setState 属性用于更新组件中的状态值。