React 组件之间的常用的通信有

一：Props（属性）传递：

组件可以通过 props 属性向它的子组件传递数据或方法。子组件可以通过 props 来访问父组件的数据或方法。

// ParentComponent.js
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = { name: 'John', age: 25 };
  
  return (
    <div>
      <ChildComponent data={data} />
    </div>
  );
}

// ChildComponent.js
function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.data.name}</p>
      <p>Age: {props.data.age}</p>
    </div>
  );
}

二：Context（上下文）传递：

Context 允许在组件树中传递数据，而无需在每个层级手动传递 props。

通过使用 React.createContext() 方法，可以创建一个上下文对象，然后通过 Provider 组件将数据传递给所有子孙组件，子孙组件可以通过使用 Consumer 组件来访问上下文数据。

// ThemeContext.js
import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ChildComponent from './ChildComponent';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

// ChildComponent.js
import React from 'react';
import ThemeContext from './ThemeContext';

function ChildComponent() {
  return (
    <ThemeContext.Consumer>
      {value => <div>Theme: {value}</div>}
    </ThemeContext.Consumer>
  );
}

三：Refs（引用）传递：

Refs 提供了在组件之间传递数据的方法，它可以让你直接操作 DOM 元素或组件实例。

可以使用 React.createRef() 方法来创建 ref 对象，然后将其传递给子组件，在子组件中可以通过 ref.current 属性来访问 DOM 元素或组件实例。

// ParentComponent.js
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = React.createRef();

  const handleClick = () => {
    childRef.current.focusInput();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

// ChildComponent.js
import React from 'react';

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusInput() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
      </div>
    );
  }
}

export default ChildComponent;

四：事件传递：

组件可以将事件处理函数通过 props 属性传递给子组件，在子组件中触发该事件，然后将数据传递回父组件。

// ParentComponent.js
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleButtonClick = (data) => {
    console.log('Received data:', data);
  };

  return (
    <div>
      <ChildComponent onButtonClick={handleButtonClick} />
    </div>
  );
}

// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
  const handleClick = () => {
    props.onButtonClick({ name: 'John', age: 25 });
  };

  return (
    <div>
      <button onClick={handleClick}>Send Data</button>
    </div>
  );
}

export default ChildComponent;

五：Flux 和 Redux 模式：

Flux 和 Redux 是一种基于全局 store 状态管理的数据流方案，可以用于管理整个应用程序的状态和数据，各个组件之间通过调用 dispatch 函数来进行状态更新和数据流动。

// store.js
import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

export default store;

六：Pub/Sub 模式：

可以使用 Pub/Sub（发布/订阅）模式，组件可以将数据或事件发布到一个主题上，而其他组件可以订阅该主题以接收数据或事件通知。需要使用第三方库来实现。

PubSub.publish("searchData",{...searchInfo,page:1,pagesize:6})
   PubSub.subscribe("searchData",(_,obj)=>{

        setSearchObj({...obj})

        GetTablistData()
        // setTotal(res.data.total)
    })
}