React实现父子组件有效通信的多种方式

import React from 'react';

const ChildComponent = ({ message }) => {
  return <h1>{message}</h1>;
};

const ParentComponent = () => {
  return <ChildComponent message="Hello from Parent!" />;
};

export default ParentComponent;

import React, { useState } from 'react';

const ChildComponent = ({ onMessageChange }) => {
  return (
    <button onClick={() => onMessageChange("Hello from Child!")}>
      Send Message to Parent
    </button>
  );
};

const ParentComponent = () => {
  const [message, setMessage] = useState("");

  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <h1>{message}</h1>
      <ChildComponent onMessageChange={handleMessageChange} />
    </div>
  );
};

export default ParentComponent;

import React, { createContext, useContext, useState } from 'react';

const MessageContext = createContext();

const ParentComponent = () => {
  const [message, setMessage] = useState("Hello from Parent!");

  return (
    <MessageContext.Provider value={{ message, setMessage }}>
      <ChildComponent />
    </MessageContext.Provider>
  );
};

const ChildComponent = () => {
  const { message, setMessage } = useContext(MessageContext);

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("Updated message from Child!")}>
        Update Message
      </button>
    </div>
  );
};

export default ParentComponent;

import React from 'react';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Reducer
const messageReducer = (state = "Hello from Redux!", action) => {
  switch (action.type) {
    case 'UPDATE_MESSAGE':
      return action.payload;
    default:
      return state;
  }
};

// Store
const store = createStore(messageReducer);

const ChildComponent = () => {
  const message = useSelector((state) => state);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => dispatch({ type: 'UPDATE_MESSAGE', payload: "Updated message from Redux!" })}>
        Update Message
      </button>
    </div>
  );
};

const ParentComponent = () => (
  <Provider store={store}>
    <ChildComponent />
  </Provider>
);

export default ParentComponent;