Summary of several ways of implementing communication between components by React

1. Props downward pass (Top-Down Propagation)

The parent component passes its state or data to the child component via props.

Parent component:

class ParentComponent extends  {
  state = { message: 'Hello World' };
 
  render() {
    return <ChildComponent message={} />;
  }
}

Subcomponents;

class ChildComponent extends  {
  render() {
    return <div>{}</div>;
  }
}

2. Callback function

The parent component passes a callback function to the child component, and the child component calls this function to communicate with the parent component when needed.

Parent component:

class ParentComponent extends  {
  handleData = (data) => {
    ('Received from child:', data);
  };
 
  render() {
    return <ChildComponent sendData={} />;
  }
}

Subcomponents:

class ChildComponent extends  {
  someEvent = () => {
    ('Data from child');
  };
 
  render() {
    return <button onClick={}>Send Data to Parent</button>;
  }
}

3. Lifting State Up (status improvement)

When multiple components need to share state, state can be promoted to their common parent component.

Parent component:

class ParentComponent extends  {
  state = { sharedData: 'Shared Data' };
 
  render() {
    return (
      <>
        <ChildA sharedData={} />
        <ChildB sharedData={} />
      </>
    );
  }
}

Subcomponents A and B:

class ChildComponent extends  {
  render() {
    return <div>{}</div>;
  }
}

4. Context (context)

React's Context API allows you to share values to all components in the component tree without having to explicitly pass props through each hierarchy

Create a Context:

const MyContext = (defaultValue);

Provide Context value:

&lt; value={/* Some values */}&gt;
  {/* Component tree */}
&lt;/&gt;

Use Context in child components:

class ChildComponent extends  {
  render() {
    return (
      <>
        {value => <div>{value}</div>}
      </>
    );
  }
}

Or useuseContexthook:

import { useContext } from 'react';
 
const ChildComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

5. Custom Hooks (custom hooks)

Custom hooks allow you to extract component logic so that it can be reused across multiple components.

Custom hooks:

function useCustomHook() {
  const [state, setState] = useState(initialState);
 
  // The logic of the hook... 
  return state;
}

Use custom hooks in components:

const Component = () => {
  const state = useCustomHook();
 
  return <div>{state}</div>;
};

6. Higher-Order Components (high-order components)

Advanced Components are an advanced technology in React that extends its functionality by wrapping a component.

Advanced Components:

function enhanceComponent(WrappedComponent) {
  return class extends  {
    // Extended logic... 
    render() {
      return &lt;WrappedComponent {...} /&gt;;
    }
  };
}
//Use advanced components: 
const EnhancedComponent = enhanceComponent(OriginalComponent);

This is the article about several ways to implement React's communication between components. For more related React communication content, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!