用代码示例说明React中的状态（State）和属性（Props）的区别

import React, { useState } from 'react';

// 子组件 - 使用Props
function UserGreeting(props) {
  // 子组件不能修改props，下面这行代码会报错
  // props.name = "New Name";
  
  return <h2>Hello, {props.name}!</h2>;
}

// 父组件 - 使用State和Props
function UserProfile() {
  // 这是State - 组件内部管理的数据
  const [age, setAge] = useState(25);
  
  // 这是父组件中的数据，可以通过Props传递给子组件
  const userName = "John Doe";
  
  // 可以修改State
  const handleAgeIncrement = () => {
    setAge(prevAge => prevAge + 1);
  };
  
  return (
    <div>
      {/* 将数据通过Props传递给子组件 */}
      <UserGreeting name={userName} />
      
      <p>Age: {age}</p>
      {/* 点击按钮修改State */}
      <button onClick={handleAgeIncrement}>Increase Age</button>
    </div>
  );
}

export default UserProfile;