react当中兄弟组件传值的一种优化参考（简单粗暴）

        在react当中，兄弟组件的传值非常的阴间且设置也十分的麻烦，我们可以看到官方给的写法大约是像这样的(以下回答来自chatGPT)：

可以使用React的Context API来实现兄弟组件之间的传值。Context API提供了一种在组件树中共享数据的方式，可以避免通过props层层传递数据的繁琐过程。具体步骤如下：

1. 在父组件中使用createContext创建一个Context对象，并定义一个默认值。

2. 在父组件中使用Provider组件将需要共享的数据传递给子组件。

3. 在兄弟组件中使用Consumer组件来接收共享的数据。

下面是一个示例代码：

import React, { createContext, useState } from 'react';
import BrotherComponent1 from './BrotherComponent1';
import BrotherComponent2 from './BrotherComponent2';

export const MyContext = createContext('default value');

function ParentComponent() {
  const [value, setValue] = useState('');

  return (
    <MyContext.Provider value={value}>
      <BrotherComponent1 setValue={setValue} />
      <BrotherComponent2 />
    </MyContext.Provider>
  );
}

export default ParentComponent;

兄弟组件1：

import React from 'react';
import { MyContext } from './ParentComponent';

function BrotherComponent1(props) {
  const handleClick = () => {
    props.setValue('Hello, brother 2!');
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

export default BrotherComponent1;

兄弟组件2：

import React from 'react';
import { MyContext } from './ParentComponent';

function BrotherComponent2() {
  return (
    <MyContext.Consumer>
      {value => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

export default BrotherComponent2;

在这个示例中，父组件使用createContext创建了一个Context对象MyContext，并将其默认值设置为'default value'。在父组件中使用Provider组件将需要共享的数据value传递给子组件。兄弟组件1通过props接收到父组件中的setValue函数，并在点击按钮时触发该函数并传递需要传递的值。父组件接收到需要传递的值后，更新状态并重新渲染组件。兄弟组件2通过Consumer组件接收到共享的数据value，并将其显示在页面上。通过这种方式，我们可以在React中方便地使用Context API实现兄弟组件之间的传值。

        可以发现这里的设置方案有一些麻烦，没必要给我搞那么多花里胡哨的东西，我只是想要传值而已，至少相对于vue而言，在vue中，我们参考兄弟组件传值主要是使用一个eventbus的方案，那么是否在react当中也可以有一种相对简单的方案来传值呢？当然也是可以的，参考vue的bus方案，我们可以在react当中定义一个使用不那么麻烦的中间件，在react项目中，已经给我们装好了这样的包——events。我们可以在中间组件中定义一段这样的代码：

import EventEmitter from 'events'
export default new EventEmitter()

在发送的和接受的组件方，导入这个中间组件：

//发送方
import bus from './bus'
import { useState } from 'react'
export default function Component (){
 const [count,setCount] = useState(0)
 return (
  <div>
   <p>当前值：{count}</p>
   <button onClick={()=>{bus.emit('methodName',count)}}>传值</button>
  </div>
 )
}

//接收方
import bus from './bus'
import { useState } from 'react'
export default function Component (){
 const [count,setCount] = useState(0)//设定一个初始值
 emit.on('methodName',(e)=>{
    setCount(e)
})//监听数据发送并保存
 return (
  <div>
   <p>当前得到的值：{count}</p>
  </div>
 )
}

        如此就可以实现兄弟组件之间的数据传达，对比原有方案有哪些优点？：

1、只需要定义一个中间组件，一次定义永久使用，因为方法名没有限制

2、使用简单方便，易于理解

3、随处使用，不受限于react框架本身(bushi)

        对比原方案的劣势：？

1、以上代码只是演示了传值，如果在数据发送方点击按钮的时候，首先设置数字自增一，然后将这个数组传达到另一方，就会发现这里的传值有延迟，原因为何？react的状态更新是异步操作，而数据发送是同步操作，因此在这里尽管将数据发送的代码写在更新的后面，数据发送也会优先于数据更新先进行，解决办法是将传值操作放在useEffect钩子里

2、监听方如果是类组件，有可能会出现不明bug，暂时不知道怎么解决，因为楼主也学习react没多久(囧)，未来的学习当中如果有更好的办法会及时更新

        本方案相对于react新手是一个很好用的替代方案，若没有基础，也可以先尝试使用这个方案的同时慢慢理解官方方案，最终以官方为准，无脑造轮子不可取，同时本人学习react时间不长，亦非计算机专业科班出生，一切全凭自学，理解不够深刻还请见谅