react组件之间如何通信？

1. 父子组件通信

通过props传递数据

父组件可以通过props向子组件传递数据和函数。

示例

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

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

  const handleClick = () => {
    setMessage('Message updated!');
  };

  return (
    <div>
      <ChildComponent message={message} onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent({ message, onClick }) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={onClick}>Update Message</button>
    </div>
  );
}

export default ChildComponent;

2. 子父组件通信

通过回调函数

子组件通过调用父组件传递的回调函数，将数据传递给父组件。

示例

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = useState('');

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

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

export default ParentComponent;

// ChildComponent.js
import React, { useState } from 'react';

function ChildComponent({ onMessageChange }) {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
    onMessageChange(event.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
}

export default ChildComponent;

3. 兄弟组件通信

通过共同的父组件

兄弟组件之间可以通过共同的父组件来共享状态和函数。

示例

// ParentComponent.js
import React, { useState } from 'react';
import SiblingOne from './SiblingOne';
import SiblingTwo from './SiblingTwo';

function ParentComponent() {
  const [sharedData, setSharedData] = useState('');

  const handleDataChange = (newData) => {
    setSharedData(newData);
  };

  return (
    <div>
      <SiblingOne onDataChange={handleDataChange} />
      <SiblingTwo data={sharedData} />
    </div>
  );
}

export default ParentComponent;

// SiblingOne.js
import React, { useState } from 'react';

function SiblingOne({ onDataChange }) {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
    onDataChange(event.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
}

export default SiblingOne;

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

function SiblingTwo({ data }) {
  return (
    <div>
      <p>Received Data: {data}</p>
    </div>
  );
}

export default SiblingTwo;

4. 全局状态管理

使用Context API

Context API可以在组件树中共享全局数据，无需逐层传递props。

示例

// MessageContext.js
import React, { createContext, useState } from 'react';

export const MessageContext = createContext();

export function MessageProvider({ children }) {
  const [message, setMessage] = useState('Hello from Context!');

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

// App.js
import React from 'react';
import { MessageProvider } from './MessageContext';
import ParentComponent from './ParentComponent';

function App() {
  return (
    <MessageProvider>
      <ParentComponent />
    </MessageProvider>
  );
}

export default App;

// ParentComponent.js
import React, { useContext } from 'react';
import { MessageContext } from './MessageContext';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const { message, setMessage } = useContext(MessageContext);

  const handleClick = () => {
    setMessage('Message updated via Context!');
  };

  return (
    <div>
      <p>{message}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent({ onClick }) {
  return (
    <button onClick={onClick}>Update Message</button>
  );
}

export default ChildComponent;

使用Redux

Redux是一种状态管理库，适用于大型应用的复杂状态管理。

示例

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

const initialState = { message: 'Hello from Redux!' };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ParentComponent from './ParentComponent';

function App() {
  return (
    <Provider store={store}>
      <ParentComponent />
    </Provider>
  );
}

export default App;

// ParentComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = useSelector((state) => state.message);
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch({ type: 'UPDATE_MESSAGE', payload: 'Message updated via Redux!' });
  };

  return (
    <div>
      <p>{message}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent({ onClick }) {
  return (
    <button onClick={onClick}>Update Message</button>
  );
}

export default ChildComponent;

总结

1. 父子组件通信：通过props传递数据和回调函数。
2. 子父组件通信：通过回调函数从子组件传递数据到父组件。
3. 兄弟组件通信：通过共同的父组件管理共享状态。
4. 全局状态管理：
   • Context API：适用于需要在组件树中共享数据的场景。
   • Redux：适用于大型应用中的复杂状态管理。