React 组件间常用的数据通信方法

在React中，组件间的数据通信可以通过多种方法实现，以下是几种常用的方法：

1. 父组件向子组件通信：通过props传递数据。

// 父组件
function ParentComponent() {
  const data = 'some data';
  return <ChildComponent data={data} />;
}
 
// 子组件
function ChildComponent({ data }) {
  return <div>{data}</div>;
}

2. 子组件向父组件通信：通过回调函数。

// 父组件
function ParentComponent({ children }) {
  const [data, setData] = useState('');
 
  const handleDataChange = useCallback((newData) => {
    setData(newData);
  }, []);
 
  return (
    <div>
      <ChildComponent onDataChange={handleDataChange} />
      <p>{data}</p>
    </div>
  );
}
 
// 子组件
function ChildComponent({ onDataChange }) {
  const [inputData, setInputData] = useState('');
 
  const handleChange = (event) => {
    setInputData(event.target.value);
  };
 
  const handleSubmit = () => {
    onDataChange(inputData);
  };
 
  return (
    <div>
      <input value={inputData} onChange={handleChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

3. 兄弟组件通信：使用context API或者自定义事件系统（如pub-sub模式）。

// Context API
const DataContext = createContext();
 
// Provider组件
function DataProvider({ children }) {
  const [data, setData] = useState('');
 
  return (
    <DataContext.Provider value={{ data, setData }}>
      {children}
    </DataContext.Provider>
  );
}
 
// Consumer组件
function ConsumerComponent() {
  const { data, setData } = useContext(DataContext);
  // ...
}

4. 跨多层组件通信：使用自顶向下的context API，或者状态管理库（如Redux或MobX）。

// Redux示例
const initialState = { data: '' };
const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
};
 
const DataProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
 
  return (
    <ReduxContext.Provider value={{ state, dispatch }}>
      {children}
    </ReduxContext.Provider>
  );
};
 
// 使用Redux的connect高阶组件连接组件
const ConnectedComponent = connect(state => ({ data: state.data }))(Component);

以上是React组件间数据通信的常用方法，具体使用哪种取决于应用场