React.js组件间如何高效通信

在React.js中，组件间的通信是一个核心概念。以下是一些高效通信的方法：

1. 状态提升（Lifting State Up）

当两个或多个组件共享相同的数据时，可以将状态提升到它们的父组件中，然后通过props将状态传递给子组件。

class ParentComponent extends React.Component {
  state = {
    sharedData: ''
  };

  handleSharedDataChange = (newData) => {
    this.setState({ sharedData: newData });
  };

  render() {
    return (
      <div>
        <ChildComponentA
          sharedData={this.state.sharedData}
          onSharedDataChange={this.handleSharedDataChange}
        />
        <ChildComponentB
          sharedData={this.state.sharedData}
          onSharedDataChange={this.handleSharedDataChange}
        />
      </div>
    );
  }
}

2. Context API

Context API 提供了一种在组件树中传递数据的方式，而不必手动通过props逐层传递。

const MyContext = React.createContext();

class ParentComponent extends React.Component {
  state = {
    sharedData: ''
  };

  handleSharedDataChange = (newData) => {
    this.setState({ sharedData: newData });
  };

  render() {
    return (
      <MyContext.Provider value={{ sharedData: this.state.sharedData, onSharedDataChange: this.handleSharedDataChange }}>
        <ChildComponentA />
        <ChildComponentB />
      </MyContext.Provider>
    );
  }
}

const ChildComponentA = () => (
  <MyContext.Consumer>
    {({ sharedData, onSharedDataChange }) => (
      <div>
        <p>{sharedData}</p>
        <input type="text" onChange={(e) => onSharedDataChange(e.target.value)} />
      </div>
    )}
  </MyContext.Consumer>
);

const ChildComponentB = () => (
  <MyContext.Consumer>
    {({ sharedData }) => (
      <div>
        <p>{sharedData}</p>
      </div>
    )}
  </MyContext.Consumer>
);

3. 使用Redux或MobX

对于大型应用，可以使用Redux或MobX等状态管理库来集中管理应用的状态。

Redux

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

const initialState = {
  sharedData: ''
};

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

const store = createStore(reducer);
export default store;

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

const ParentComponent = () => (
  <Provider store={store}>
    <div>
      <ChildComponentA />
      <ChildComponentB />
    </div>
  </Provider>
);

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

const ChildComponentA = () => {
  const sharedData = useSelector(state => state.sharedData);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{sharedData}</p>
      <input type="text" onChange={(e) => dispatch({ type: 'UPDATE_SHARED_DATA', payload: e.target.value })} />
    </div>
  );
};

// ChildComponentB.js
import React from 'react';
import { useSelector } from 'react-redux';

const ChildComponentB = () => {
  const sharedData = useSelector(state => state.sharedData);

  return (
    <div>
      <p>{sharedData}</p>
    </div>
  );
};

MobX

// store.js
import { observable, action } from 'mobx';

class Store {
  @observable sharedData = '';

  @action updateSharedData(newData) {
    this.sharedData = newData;
  }
}

const store = new Store();
export default store;

// ParentComponent.js
import React from 'react';
import { observer } from 'mobx-react';
import ChildComponentA from './ChildComponentA';
import ChildComponentB from './ChildComponentB';
import store from './store';

const ParentComponent = observer(() => (
  <div>
    <ChildComponentA store={store} />
    <ChildComponentB store={store} />
  </div>
));

// ChildComponentA.js
import React from 'react';
import { observer } from 'mobx-react';

const ChildComponentA = observer(({ store }) => (
  <div>
    <p>{store.sharedData}</p>
    <input type="text" onChange={(e) => store.updateSharedData(e.target.value)} />
  </div>
));

// ChildComponentB.js
import React from 'react';
import { observer } from 'mobx-react';

const ChildComponentB = observer(({ store }) => (
  <div>
    <p>{store.sharedData}</p>
  </div>
));

4. 使用事件总线（Event Bus）

事件总线是一种发布-订阅模式，可以在组件之间传递消息。

// eventBus.js
import { EventEmitter } from 'events';
export const eventBus = new EventEmitter();

// ParentComponent.js
import React, { useEffect } from 'react';
import { eventBus } from './eventBus';
import ChildComponentA from './ChildComponentA';
import ChildComponentB from './ChildComponentB';

const ParentComponent = () => {
  useEffect(() => {
    const handleSharedDataChange = (newData) => {
      console.log('Shared data changed:', newData);
    };

    eventBus.on('sharedDataChange', handleSharedDataChange);

    return () => {
      eventBus.off('sharedDataChange', handleSharedDataChange);
    };
  }, []);

  return (
    <div>
      <ChildComponentA />
      <ChildComponentB />
    </div>
  );
};

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

const ChildComponentA = () => {
  const [sharedData, setSharedData] = useState('');

  const handleChange = (e) => {
    setSharedData(e.target.value);
    eventBus.emit('sharedDataChange', e.target.value);
  };

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

// ChildComponentB.js
import React, { useEffect } from 'react';
import { eventBus } from './eventBus';

const ChildComponentB = () => {
  useEffect(() => {
    const handleSharedDataChange = (newData) => {
      console.log('Shared data changed in ChildComponentB:', newData);
    };

    eventBus.on('sharedDataChange', handleSharedDataChange);

    return () => {
      eventBus.off('sharedDataChange', handleSharedDataChange);
    };
  }, []);

  return (
    <div>
      <p>ChildComponentB: Shared Data</p>
    </div>
  );
};

选择哪种方法取决于应用的规模和复杂性。对于小型应用，状态提升和Context API通常足够。对于大型应用，Redux或MobX可能更合适。事件总线则适用于需要灵活通信的场景。