剖析前端组件通信的前沿攻略，以少胜多，技压群雄

2023-11-08 08:40:58

在现代前端开发中，组件已成为构建用户界面的核心要素。组件可以复用，便于维护，有助于提高开发效率。然而，在构建组件时，我们经常需要考虑组件之间的通信问题。

父子组件通信

父子组件通信是组件通信最常见的一种方式。父组件可以通过 prop(s) 属性向子组件传参，子组件可以通过自定义事件来向父组件发送消息。

通过 `prop(s)` 属性传参

prop(s) 属性是一种单向的数据流机制。父组件可以通过 prop(s) 属性向子组件传递数据，但子组件无法修改父组件的数据。

// 父组件
const ParentComponent = () => {
  const data = { name: 'John Doe', age: 30 };
  return <ChildComponent data={data} />;
};

// 子组件
const ChildComponent = (props) => {
  return (
    <div>
      <h1>{props.data.name}</h1>
      <p>{props.data.age}</p>
    </div>
  );
};

通过自定义事件发送消息

自定义事件是一种双向的数据流机制。子组件可以通过自定义事件向父组件发送消息，父组件也可以通过自定义事件向子组件发送消息。

// 父组件
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  );
};

// 子组件
const ChildComponent = (props) => {
  return (
    <div>
      <button onClick={props.onIncrement}>Increment</button>
    </div>
  );
};

非父子组件通信

非父子组件通信是指两个组件之间没有直接的父子关系，但需要互相通信。非父子组件通信有多种方式，包括：

全局状态管理

全局状态管理是一种将数据存储在中央位置，然后让所有组件都可以访问该数据的方式。这样，组件之间就可以通过修改全局状态来进行通信。

// 全局状态管理库
const state = {
  count: 0
};

// 父组件
const ParentComponent = () => {
  const [count, setCount] = useState(state.count);

  const handleIncrement = () => {
    setCount(state.count + 1);
    state.count++;
  };

  return (
    <div>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  );
};

// 子组件
const ChildComponent = (props) => {
  return (
    <div>
      <button onClick={props.onIncrement}>Increment</button>
    </div>
  );
};

事件总线

事件总线是一种将组件之间的通信解耦的方式。组件可以通过事件总线来订阅和发布事件，而无需直接引用其他组件。

// 事件总线
const eventBus = new EventEmitter();

// 父组件
const ParentComponent = () => {
  useEffect(() => {
    eventBus.on('increment', handleIncrement);

    return () => {
      eventBus.off('increment', handleIncrement);
    };
  }, []);

  const handleIncrement = () => {
    eventBus.emit('increment');
  };

  return (
    <div>
      <ChildComponent />
    </div>
  );
};

// 子组件
const ChildComponent = () => {
  useEffect(() => {
    eventBus.on('increment', handleIncrement);

    return () => {
      eventBus.off('increment', handleIncrement);
    };
  }, []);

  const handleIncrement = () => {
    console.log('Increment');
  };

  return (
    <div>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};