💡 React 父子组件通信：一个进度条教会我的 件事

📌 前言 —— 常见痛点拆解

痛点一：数据在父组件里UI 在子组件里却不知道怎么把数据传过去？

痛点二：子组件完成某个操作后父组件需要得到通知，但又不想让子组件直接改父组件的 state。

🎯 这篇文章适合谁 —— 针对这个问题的读者画像

• 刚接触 React 组件化开发的新手 🚀
• 分不清 state/props。总是出现“属性未定义”报错的同学 🤔
• 想彻底弄明白单向数据流的开发者 📈
• 面试中被问到「如何实现跨层通信」的人 🎤

📚 第一件事：State 是你的钱包，Props 是别人给的红包 🎁

父组件 App.tsx

import Progress from './components/Progress';import { useState } from 'react';function App {
// ✅ 父组件定义数据状态
const = useState;const = useState;const = useState;return (

{status === "loading" && (


{loadingMessage}
{/* ✅ 通过 props 把数据传给子组件 */}
{progressItems.map => (

))}

)}

);}
export default App;

子组件 Progress.tsx

import React from 'react';function formatBytes {
const i = size === 0?0 : Math.floor / Math.log);return +).toFixed * 1 +;}
// ✅ 子组件通过函数参数接收 props
const Progress = => {
// 空值赋值运算符：如果 percentage 是 null/undefined，设为默认值
const safePercentage = percentage?，0;return (


{text} {safePercentage.toFixed}%
{isNaN?"" : ` of ${formatBytes}`}


);}，export default Progress;老实说，

State vs Props 一张表搞懂 🚦

特性	State	Props
定义位置	useState / 类构造函数内部
# 是否可变?	✔ 用 setXxx 改变	✘ 子 component 无法直接改，只能读

"State 是自己的钱包，Props 是别人送来的红包"

📚 第二件事：数据只能从上往下流 ⬇️⬆️

父组件 App
├── state: progressItems。status...
│ ├── props ──→ 子组件 Progress①
│ │ └── text,percentage,total
│ └── props ──→ 子组件 Progress②
│ └── 同上
└── 回调函数 ←─←─ 子组件

痛点三： "我总是忘记只能单向流动，一不小心就在任意层直接改 state，导致 UI 难以追踪"

📚 第三件事：子组件怎么通知父组件？📣

The trick is: parent passes a function as a prop → child calls it when needed.

再看完整示例，进度完成时通知父组件 🎉

// 父 component – 定义回调并传递
function App {
const = useState;const = useState;// ✅ 回调函数：子 component 完成时调用
const handleComplete = => {
setCompletedCount;console.log，};return (


已完成 {completedCount} 个文件
{progressItems.map => (
 handleComplete} {/* ✅ 把回调传进去 */}
/>
))}

);}

// 子 component – 收到回调后在适当时机调用
const Progress = => {
if {
onComplete;// 🎯 通知父 component
}
return (


{text} {percentage.toFixed}%


);}，

关键概念： "数据向下事件向上"

📚 第四件事：Props Drilling 的痛与解 🕳️➡️🛠️

痛点四： "我的主题色要在最深层的按钮里使用，却被迫把它一层层往下传。每层都要写多余的 props"

Props Drilling 示例 ❌
{/* Layout 层 */}
{/* Sidebar 层 */}
{/* FileList 层 */}
{/* 真正需要 */}	// 使用 me 来决定样式…​

从方法一来看。React Context 🌐

// 创建 Context
import { createContext,useContext } from 'react';const ThemeContext = createContext;// 顶层提供值
function App {
return (



);}
// 任意深层消费
const Progress = => {
const me = useContext;return (

{text} {percentage}%

};

* 小技巧：如果只有几层且不会频繁变更，也可以考虑「组合模式」或「自定义 Hook」来避免 Context 的额外开销。

方案	适用场景	复杂度
Props + 回调	兄弟/直系父子通信	⭐
Context	跨多层共享全局状态。如主题、语言、使用者信息等	⭐⭐
Redux/Zustand 等全局状态管理库	复杂业务、跨页面的大型应用	⭐⭐⭐⭐

📚 第五件事：key 是性能保障 ⚡️🚀

If you forget to add a unique key>,every list update forces React to re‑render whole list.

{
progressItems.map=>(
)
)}
// ❌ 用 index 当 key 在列表重排时会出问题 → 建议使用唯一 ID 如 fileId。

<   td>列表增删或排序  
<   td>需要保持内部状态  


场景  
不加 key  
加 key  



全部重新渲染 → 性能差  
仅变化项更新 → 性能好   

状态可能错位    
保持正确     




📝 Props 的类型约束 🛡️ 
interface ProgressProps{
从text来看。string,percentage?:number,total:number,onComplete?:=>void,}
const Progress==>{
return(

{text}{percentage .toFixed}%{!isNaN，`of ${formatBytes}`:''}

);}，export default Progress;

考点 ：State 和 Props 的区别？说起来，🔍​​

Actually we have repeated earlier parts. Let's correct this section:

--- We need clean final version.

Proceed:

Parent Component

tsx import Progress from './components/Progress';import { useState } from 'react';

function App { // ✅ 定义本地状态——相当于自己的钱包 const =useState;const =useState; const =useState;

return (

{/* ✅ 将只读信息透过 Props 下发给孩子 */} {progressItems.map=>( ＜Progress key＝{i} text＝{text} percentage＝{percentage} total＝{total} ／＞ ))} ＜／DIV＞ )}<／DIV＞) }; export default App;

Child Component

tsx import React from 'react';

function formatBytes{ const i=size===0?0:Math.floor/Math.log);return +).toFixed+' '+;}

// ✅ 接收来自 Parent 的 Props，就像收到红包一样只读 const Progress==>{ const safePerc=percentage?，０;

return( ${safePerc}%}}className=”bg‑blue‑500 whitespace-nowrap px‑2 text-sm text-white”＞ {text}{safePerc.toFixed}%{isNaN?'' :of ${formatBytes}} ＜／DIV＞ ＜／DIV＞ );}，export default Progress;

⚖️ State vs Props 一张表快速对比 \/\/\/\

. TR STYLE=""ALIGN=center" TD ALIGN=LEFT STYLE=""WIDTH=30%"" "> 定义位置 TD ALIGN=CENTER STYLE=""WIDTH=35%" "> 调用 useSate 或类构造器内部 TD ALIGN=CENTER STYLE=""WIDTH=35%" "> 从父 Component via JSX attributes

特性	State <#align=center>#<>/tH	#<>/TH>/TR>/THEAD

TR STYLE=""ALIGN=center" TD ALIGN=LEFT STYLE=""WIDTH=30%"" "> 是否可变?TD ALIGN=CENTER STYLE=""WIDTH=35%" "> ✔️ 用 setXxx 改变 TD ALIGN=CENTER STYLE=""WIDTH=35%" "> ✖️ 子 Component 不可直接改。只能读取

TBody END/TABLE

: “ State 像你的钱包，你可以随意存取；Props 像别人的红包，只能收不能改”。

---

\uefffd 痛点五：: 很多人在实际项目里忘记了 “单向”，随手写成了 Child 可以直接修改 Parent’s state，这会导致 UI 难以预测和 debug。

---

tsx // Parent – define callback and pass down as prop function App{ const=useState;

const handleFinish==>{ setCompleted;console.log，};

return ( ＜Div＞ ＜Progress …onComplete={=>handleFinish} /＞ // 👈 Pass callback down ＜／Div＞ );}

// Child – call when needed const Progress==>{ if{onComplete;} return，};

主要概念: 数据“向下”，事件“向上”。当 Child 完成任务后只需要执行已经注入好的 callback 即可，无需直接操作 Parent’s state。

---

\t\t\t\t\t\t\t\t\t\t\t \t \ LiStyle="\list-style-type:none"\">\t\ Pain Point:\t\ When you need a global value such as Theme or UserInfo deep inside tree,\ you end up passing it through components that never actually use it. \ \ LiStyle="\margin-top:.25rem\"\">A Bad Example:<\\/b>
<\ Code Block: \ tsx \ // ❌ Prop drilling – each intermediate component is forced to forward `me` \ const Layout={=>};\ const Sidebar={=>};\ const FileList={=>}; \ LiStyle="\margin-top:.45rem\"\">The Fix – Context API:<\\/b>
tsx \ import{createContext,useContext}from'react';\ const ThemeCtx=createContext;// Provider default value // Root – wrap whole app with Provider function App{return } // Any deep child can consume directly without drilling function Progress{ const me=useContext;return } \

---

方案 适用场景 复杂度评级

Props + Callback 兄弟或直系上下级之间的数据交换 '★'

React Context 跨多层共享全局信息，如主题、语言、使用者对象等 '★★'

Redux/Zustand 等全局状态库 大型项目、多页面、复杂业务逻辑 '★★★★'

/table>

---

\ \ \ \

场景\	不加 key 或使用 index\	使用唯一 ID\ \
列表增删或排序\	所有项都会重新渲染 → 性能下降且可能导致输入框失焦等副作用\ \
	- 可接受但仅限静态列表\ \ \ \ /table>

\

If list order never changes and items have no natural IDs — using index is OK. If you ever add/remove/reorder items — always prefer a real unique identifier.

\

---

tsx interface ProgressProps{ text的观点是，string;percentage，:number;// optional – defaults to zero inside component 说到total，number;不过，onComplete?:=>void，// optional callback }

const Progress==>{

// …if{onComplete;}

return(

---

🧪 面试高频考点 🎤

\
" \/ 答：" State 为当前 Component 内部可变的数据，用 useState 管理；不过，Props 为外部通过 JSX 注入的只读属性。" /li>\
"
答：" 单向流动——Parent 向 Children 投递 Props；Children 若需反馈则调用 Parent 提供的回调。" /li>\
"什么是 Prop Drilling？如何解决，"
答：" 为了让深层节点获取祖先的数据而不得不逐层转发 Props。怎么说呢，方法包括 Context API、Redux/Zustand 或者自定义 Hook。" /li>\
"key 有什么作用？为何不能随便用 index?"
答：" key 帮助 React 正确匹配旧节点与新节点，实现最小化重渲染。index 在列表重排时会导致错误匹配，引发 UI 状态错乱。" /li>\

---

💡 我的看法 — 简洁至上 <\/ H３>

• - 若仅有一两层嵌套 👉 props + callback 即可满足需求。\
• - 跨多层共享全局信息 👉 Context。\
• - 项目规模大且涉及复杂业务逻辑 👉 Redux/Zustand 等全局状态库。\
• - 永远遵循「先最简。再升级」原则，不要为了解决未来假设而提前引入复杂工具。\

---

💡主要 🗒️ <\/ H３>

/ \ / \

# 件事 #\<#Th>	# 主要要点 #	/Tr>/Thead>
件 回 调 函数	子组 件 通 知 父组 件	/
第四件 Prop Drilling 与 Context	跨 多 层 信息共享	/
第五件 Key 优 化	防止整 列 重渲染	/ Tr>/ Tbody>/ Table>

---

🔗参考资料 📚 <\/ H۳>

\
\
\
\

---

💬交流讨论 💭 <\/ H３>

---