react中父子数据流动和事件互相调用（和vue做比较）
前言：
react中父子数据流动和事件互相调用，父组件给子组件数据，父组件调用子组件的事件，同理，子也可以调用父的数据和传值。
react是单向数据流，具体使用跟vue是不同的。
1、父组件的数据传给子组件，使用props，也就是{}
可以看到vue的数据绑定是v-bind，简写{{}}
react的数据也是props传值接收，简写就是{}
//引入子组件
import { Line as LineEchart } from "@/components/echarts";//定义变量，一种是hook的useState,另一种是直接定义变量
const [dealOpt, setDeal] = useState({});
const echartStyle = {height: 50,
};// option绑定我们的变量，用{}绑定变量
<LineEchart option={dealOpt} style={echartStyle} />
//子组件内部定义方法的时候，参数直接写在方法上面function Line({ theme = "light", style = {}, option = {} }) {....
}// memo是提高性能的hook函数
export default memo(Line, (prev, next) => prev.option === next.option);2、父组件调用子组件内部的函数方法
通过ref来调用，具体要用到
useRef+forwardRef+useImperativeHandle
vue的也是ref，不过直接用refs调用子级方法
父级组件内部，用ref来调用
import { useRef } from 'react'; //useRef 是ref的方法
import Child from './Child'; //引入子组件// 函数内部
// 默认定义ref，然后绑定到dom元素const childRef = useRef();const triggerChildMethod = () => {childRef.current.childMethod(); // 调用子组件方法，childRef.current
};return (<div><button onClick={triggerChildMethod}>点我触发事件</button><Child ref={childRef} /></div>
);对应的子组件内部，forwardRef+useImperativeHandle
import { forwardRef, useImperativeHandle } from 'react';const Child = forwardRef((props, ref) => {useImperativeHandle(ref, () => ({childMethod: () => {console.log("Child method called!");},}));return <div>Child Component</div>;
});3、子给父传事件
vue的话，就是用$emit/defindEmit的方法
react的话，用回调函数，也是用{}来绑定
父级内部接收
import { useState } from 'react';
//用hook里面的useState定义变量childData
const [childData, setChildData] = useState('');// 定义父的事件
const handleDataFromChild = (data) => {setChildData(data); // 接收子组件的数据
};//onSendData是子给父的方法名return (<Child onSendData={handleDataFromChild} />});子级发送
const sendData = () => {onSendData("Hello from Child"); // 调用父组件的回调函数，onSendData
};return <button onClick={sendData}>点击</button>;4、跨层调用，父给子孙任意一级传值，或孙改父的数据，
vue的话，vuex或者eventBus
react用hook里面的createContext
父组件：
// 1. 创建 Context
import { createContext, useContext, useState } from 'react';const DataContext = createContext();// 2. 父组件提供数据
function Parent() {const [data, setData] = useState("我是默认数据");return (<DataContext.Provider value={{ data, setData }}>//Child 代表子组件，至于子嵌孙不用DataContext.Provider<Child /></DataContext.Provider>);
}孙组件：
//data是我们的默认值，setData 可以修改这个默认值的事件
const { data, setData } = useContext(DataContext);return (<button onClick={() => setData("Updated Data")}>更改父内容: {data}</button>
);