父子组件通信
React 数据默认“自上而下”流动：父传子用 props，子传父用回调——父组件把函数当 props 传下去，子组件调用它把数据送回来。这相当于“父组件是数据中心，子组件只负责展示与上报”。
跨层传递是 props 的短板：爷爷想把数据给孙子，中间组件被迫“过路”传递无关 props（prop drilling）。层数少时可以忍，层数多或多个组件共享同一份数据时，就该上 Context。
- 父传子 = props；子传父 = 父传下来一个回调函数，子调用它上报
- state 放在共同父组件，让需要它的组件都成为它的子级
- 层数太深 / 多组件共享同一数据 → 上 Context 或状态库
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>父子通信</title> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const { useState } = React; // 子组件：展示 + 把按钮事件上报给父级 function Child({ value, onAdd }) { return ( <div style={{ border: '1px dashed #61dafb', padding: 8 }}> <p>子组件收到：{value}</p> <button onClick={() => onAdd(value + 1)}>子组件请求 +1</button> </div> ); } // 父组件持有数据，通过 props 下发、通过回调回收 function Parent() { const [num, setNum] = useState(1); return ( <div style={{ padding: 16 }}> <p>父组件 state：{num}</p> <button onClick={() => setNum(num + 1)}>父组件自己 +1</button> <Child value={num} onAdd={setNum} /> </div> ); } ReactDOM.createRoot(document.getElementById('root')).render(<Parent />); </script> </body> </html>
本节要点父子通信 = props 下发 + 回调上报；数据放共同父级，跨多层才用 Context。
