React父子组件通信必须通过props与回调函数配合实现单向数据流：父传子用属性传递，子传父用回调函数；跨层级通信可用Context避免props钻取，但需注意性能影响。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在React项目中实现父子组件间的数据传递，必须依赖props与回调函数配合使用，这是React单向数据流的强制要求，不遵守会导致状态不可追踪、调试困难。
父组件向子组件传数据
在父组件JSX中，把需要传递的值作为属性写在子组件标签上，例如message="欢迎来到首页"或user={{ name: "张三", id: 1001 }}。
子组件用函数参数解构接收，比如const Child = ({ message, user }) => { ... }，直接在JSX中渲染{message}或{user.name}即可。
注意：传递对象或数组时，若子组件需修改其内部字段，必须由父组件统一管理状态——子组件不能直接user.name = "李四"，否则React无法触发重渲染。
子组件向父组件传数据
第一步：父组件定义一个事件处理函数，例如const handleFormSubmit = (formData) => { setFormData(formData); }；
第二步：把这个函数通过props传给子组件，写成<child onsubmit="{handleFormSubmit}"></child>；
第三步：子组件在表单提交或按钮点击时调用该函数，如onClick={() => props.onSubmit({ name: inputRef.current.value })}。
【关键前提】父组件必须预先声明状态更新逻辑（如useState），否则子组件调用回调时会报setFormData is not a function错误。
跨多层组件传递：用Context避免props钻取
方法一：创建Context对象，用React.createContext()初始化，导出Provider和Consumer（或useContext Hook）；
方法二：在最外层组件（如App.js）包裹MyContext.Provider value={{ userInfo, updateUser }}，把共享数据和更新函数注入；
方法三：任意深层子组件直接调用const { userInfo, updateUser } = useContext(MyContext)读取或触发更新，无需逐层传递props。
这一步操作起来很简单，直接把文件拖进去就行。但要注意：Context适合频率低、数据量小的共享状态，高频更新（如鼠标位置）会引发大量重渲染。
