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

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