前言：
????????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>
);
