前言：

        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>
);

5、redux来调用不同层级组件的事件与数据