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可能更合適。事件總線則適用于需要靈活通信的場景。