react 父子组件如何通信
父子组件通信方法
父组件向子组件传递数据（Props）
父组件通过props将数据传递给子组件，子组件通过this.props（类组件）或直接解构（函数组件）接收。这是React中最基础的通信方式。
// 父组件
<ChildComponent message="Hello from parent" />
// 子组件（函数式）
function ChildComponent({ message }) {
return <div>{message}</div>;
}子组件向父组件传递数据（回调函数）
父组件通过props传递一个回调函数给子组件，子组件调用该函数并传递参数实现数据回传。
// 父组件
function Parent() {
const handleData = (data) => console.log(data);
return <Child onData={handleData} />;
}
// 子组件
function Child({ onData }) {
return <button onClick={() => onData("Child data")}>Send</button>;
}使用Context跨层级通信
当组件层级较深时，可通过React Context避免逐层传递props。创建Context后，父组件用Provider提供数据，子组件用useContext或Consumer消费数据。
const MyContext = React.createContext();
// 父组件
function Parent() {
return (
<MyContext.Provider value="Context Data">
<Child />
</MyContext.Provider>
);
}
// 子组件
function Child() {
const value = useContext(MyContext);
return <div>{value}</div>;
}Ref传递DOM或组件实例
父组件通过useRef或createRef创建ref，并传递给子组件，可获取子组件的DOM节点或实例方法（需配合forwardRef）。
// 子组件（需用forwardRef包装）
const Child = forwardRef((props, ref) => {
return <div ref={ref}>Child Element</div>;
});
// 父组件
function Parent() {
const childRef = useRef();
useEffect(() => {
console.log(childRef.current); // 访问子组件DOM
}, []);
return <Child ref={childRef} />;
}注意事项
- 单向数据流：React遵循单向数据流，直接修改props会引发警告，应通过回调函数更新父组件状态。
- 性能优化：避免在渲染函数中动态创建回调，可能导致子组件不必要的重新渲染。
- Context使用场景：仅适用于跨多层级通信，简单场景仍建议使用props。
