1 React 组件 props 概念与使用

  • props 本质与作用：props 可类比为 “可调节的旋钮”，作用和函数参数一致，是 React 组件的唯一参数，以对象形式存在。例如在 function Avatar(props) 中，props 就是包含所有传入属性的对象，可通过 props.person、props.size 来访问具体属性。
  • 解构优化：实际开发中通常不需要整个 props 对象，可对其进行解构，使代码更简洁，比如可将 let person = props.person; let size = props.size; 优化为函数参数的解构形式 function Avatar({ person, size })。

补充背景：这种设计让 React 组件的参数传递更灵活，能像配置项一样动态调整组件的表现，是组件化开发中实现复用和定制的核心机制之一。

2 props并不总是静态的，props是不可变的

  • props 的动态性：组件的 props 并非静态，会随时间变化。例如 time prop 每秒更新、color prop 随用户选择变化，它反映了组件在任意时间点的数据状态。
  • props 的不可变性：props 是 “不可变” 的，组件自身无法直接修改 props。若需变更，需由父组件传递新的 props 对象，旧 props 会被丢弃并由 JavaScript 引擎回收内存。
  • 开发注意事项：不要尝试在组件内部 “更改 props”，若需响应用户输入（如修改颜色），应通过 “设置 state” 来实现，可进一步学习 “State：组件的记忆” 相关内容。

补充背景：这种设计是 React 数据流动（单向数据流）的核心体现，确保了组件数据的可预测性，让状态管理更清晰，是 React 组件化开发中维护数据一致性的关键机制。

3 props摘要

规则类型具体说明背景与拓展
传递 props像 HTML 属性一样添加到 JSX 中即可传递 props。是组件间数据传递的基础方式，让父组件能向子组件传递配置信息。
读取 props可通过函数参数解构语法（如 function Avatar({ person, size })）读取 props。解构能简化代码，让开发者更直观地访问 props 中的具体属性。
默认值设置可为 props 指定默认值（如 size = 100），用于处理缺少值或值为 undefined 的情况。提升组件的健壮性，避免因 props 缺失导致的异常。
展开语法转发可使用 <Avatar {...props} /> 这样的 JSX 展开语法转发所有 props，但不建议过度使用。适合批量传递 props 场景，但过度使用会降低代码可读性和可维护性。
children prop嵌套的 JSX（如 <Card><Avatar /></Card>）会被视为父组件（Card）的 children prop。是实现组件嵌套、布局复用的重要机制，让组件能包含任意子内容。
props 不可变性Props 是只读的时间快照，每次渲染会收到新版本，且组件自身不能修改 props。若需交互性，应设置 state。这是 React 单向数据流的体现，确保数据可预测；state 则用于处理组件内部的可变状态，二者分工明确

应用props

import { getImageUrl } from './utils.js';
export default function Gallery() {
  return (
    

      
Notable Scientists

      

        
Maria Skłodowska-Curie

        Maria Skłodowska-Curie
        
    
          
  • 
            Profession: 
            physicist and chemist
          
    • 
          
  • 
            Awards: 4 
            (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal)
          
    • 
          
  • 
            Discovered: 
            polonium (chemical element)
          
    • 
        

      

      

        
Katsuko Saruhashi

        Katsuko Saruhashi
        
    
          
  • 
            Profession: 
            geochemist
          
    • 
          
  • 
            Awards: 2 
            (Miyake Prize for geochemistry, Tanaka Prize)
          
    • 
          
  • 
            Discovered: 
            a method for measuring carbon dioxide in seawater
          
    • 
        

      

    

  );
}

修改后

import { getImageUrl } from './utils.js';
function Profile({
  imageId,
  name,
  profession,
  awards,
  discovery,
  imageSize = 70
}) {
  return (
    

      
{name}

      {name}
      
    
        
  • Profession: {profession}
    • 
        
  • 
          Awards: {awards.length} 
          ({awards.join(', ')})
        
    • 
        
  • 
          Discovered: 
          {discovery}
        
    • 
      

    

  );
}
export default function Gallery() {
  return (
    

      
Notable Scientists

      
      
    

  );
}

要理解在这个组件中如何使用 props，我们可以把重复的 profile 模块抽成独立组件，通过 props 传递不同科学家的信息（姓名、头像 ID、职业、奖项、发现等）。这样能让代码更复用、更易维护，也能清晰展示 props 的作用。

步骤 1：创建可复用的 ScientistProfile 子组件

把每个科学家的信息封装成一个组件，通过 props 接收外部传入的数据：

// 新建 ScientistProfile.jsx 文件
import { getImageUrl } from './utils.js';
export default function ScientistProfile(props) {
  // 通过 props 接收父组件传递的所有科学家信息
  const { name, imageId, profession, awards, discovered } = props;
  return (
    

      
{name}

      {name}
      
    
        
  • 
          Profession: 
          {profession}
        
    • 
        
  • 
          Awards: {awards.length} 
          {awards.join(', ')}
        
    • 
        
  • 
          Discovered: 
          {discovered}
        
    • 
      

    

  );
}

步骤 2：在 Gallery 父组件中传递 props

原来的 Gallery 组件作为父组件，向 ScientistProfile 子组件传递不同的 props（每个科学家的具体数据）：

import { getImageUrl } from './utils.js';
import ScientistProfile from './ScientistProfile.jsx'; // 引入子组件
export default function Gallery() {
  return (
    

      
Notable Scientists

      {/* 传递第一个科学家的 props */}
      
      {/* 传递第二个科学家的 props */}
      
    

  );
}

对 props 用法的详细解释

  1. 什么是 props？props 是 “properties” 的缩写，是 React 中父组件向子组件传递数据的方式。可以把它理解成 “组件的参数”—— 就像函数通过参数接收外部输入，组件通过 props 接收父组件的输入。

  2. 如何传递 props？在父组件中使用子组件时，像写 HTML 属性一样添加自定义属性即可。例如 <ScientistProfile name="xxx" imageId="xxx" /> 中，name、imageId 等就是传递给子组件的 props。

  3. 如何读取 props？子组件的函数参数就是 props 对象。可以直接通过 props.xxx 读取，也可以像上面的例子一样用解构赋值（const { name, imageId } = props）来简化代码。

  4. props 的特点

    • 只读性：子组件不能修改 props 的值（要修改需通过父组件重新传递）。
    • 动态性：父组件可以随时传递新的 props，子组件会自动重新渲染。

通过这种 “抽离组件 + 传递 props” 的方式，你可以清晰地看到 props 是如何在组件间传递数据的，也能体会到它让代码复用、维护更高效的优势。