React/Vue 中的组件通信方式有哪些？请列举并说明其适用场景。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

呦，各位观众老爷，大家好！我是你们的老朋友，Bug Killer。今天咱们不聊风花雪月，就来扒一扒 React 和 Vue 这俩当红炸子鸡的组件通信方式。保证让你听得明白，用得溜溜的！

开场白：组件通信的重要性

在前端开发的世界里，组件就像乐高积木，而组件通信就是连接这些积木的桥梁。没有通信，组件就是孤岛，再漂亮的设计也只能孤芳自赏。无论是父子组件间的简单数据传递，还是兄弟组件间的消息共享，组件通信都是构建复杂应用的基础。

React 组件通信方式详解

React 组件通信就像家族关系，有直系血亲，也有远房表亲，关系不同，通信方式也不同。

Props（属性传递）：父传子

Props 是 React 中最基本、也是最常用的父组件向子组件传递数据的方式。就像老爸给儿子零花钱一样，直接、简单、粗暴！

适用场景：
- 父组件需要向子组件传递数据，例如配置信息、回调函数等。
- 子组件只需要接收数据，不需要修改父组件的状态。
代码示例：
```
// 父组件
function ParentComponent() {
  const message = "Hello, son!";
  const handleClick = () => {
    alert("Button clicked in parent!");
  };

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

// 子组件
function ChildComponent(props) {
  return (
    <div>
      <p>{props.message}</p>
      <button onClick={props.onClick}>Click Me</button>
    </div>
  );
}
```
原理： 父组件通过在子组件标签上设置属性，将数据传递给子组件。子组件通过 props 对象访问这些数据。

Callback（回调函数）：子传父

Callback 就像儿子向老爸汇报成绩一样，儿子做了啥事，通过回调函数告诉老爸。

适用场景：

子组件需要通知父组件发生了某些事件，例如用户点击了按钮、输入框内容发生了变化等。
父组件需要根据子组件的操作来更新自己的状态。

代码示例：

// 父组件
function ParentComponent() {
  const [message, setMessage] = React.useState("");

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

  return (
    <div>
      <p>Message from child: {message}</p>
      <ChildComponent onUpdate={handleChildUpdate} />
    </div>
  );
}

// 子组件
function ChildComponent(props) {
  const [inputValue, setInputValue] = React.useState("");

  const handleChange = (event) => {
    const newValue = event.target.value;
    setInputValue(newValue);
    props.onUpdate(newValue); // 调用父组件传递的回调函数
  };

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

原理： 父组件将一个函数作为 props 传递给子组件。子组件在适当的时候调用这个函数，并将数据作为参数传递给父组件。

Context（上下文）：跨层级传递

Context 就像家族的族谱，可以跨越好几代人传递信息。

适用场景：
- 需要在多个组件之间共享数据，而这些组件之间又没有直接的父子关系。
- 避免通过 props 逐层传递数据，简化组件结构。例如，主题颜色、用户身份验证信息等。
代码示例：
```
// 创建 Context
const ThemeContext = React.createContext("light");

// 父组件（Provider）
function ParentComponent() {
  return (
    <ThemeContext.Provider value="dark">
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

// 子组件（Consumer）
function ChildComponent() {
  return (
    <GrandChildComponent />
  );
}

// 孙子组件（使用 Context）
function GrandChildComponent() {
  const theme = React.useContext(ThemeContext);
  return (
    <div>
      Theme: {theme}
    </div>
  );
}
```
原理： 使用 React.createContext() 创建一个 Context 对象。使用 Context.Provider 组件包裹需要共享数据的组件，并设置 value 属性。使用 Context.Consumer 组件或 useContext hook 在子组件中访问 Context 的值。

Redux/Mobx（状态管理）：全局状态共享

Redux 和 Mobx 就像家族的银行账户，所有的家庭成员都可以存取。

适用场景：

大型应用，需要管理复杂的状态。
多个组件需要共享和修改同一个状态。
需要实现可预测的状态变化和调试。

代码示例 (Redux):

// 定义 action
const INCREMENT = 'INCREMENT';

function increment() {
  return {
    type: INCREMENT
  }
}

// 定义 reducer
function counterReducer(state = 0, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    default:
      return state;
  }
}

// 创建 store
const store = Redux.createStore(counterReducer);

// 组件中使用 Redux
function CounterComponent() {
  const count = useSelector(state => state);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
}

原理： Redux 和 Mobx 都是状态管理库，它们通过单一数据源（store）来管理应用的状态。组件可以通过 dispatch action 来触发状态的改变，并订阅 store 的变化来更新视图。

useRef（引用）：直接访问 DOM 元素

useRef 就像家族的钥匙，可以直接打开某个房间的门。

适用场景：
- 直接访问 DOM 元素，例如获取焦点、滚动到指定位置等。
- 在组件的生命周期中保持某些值的引用，而不会触发组件重新渲染。
代码示例：
```
function MyComponent() {
  const inputRef = React.useRef(null);

  const handleClick = () => {
    inputRef.current.focus(); // 获取焦点
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}
```
原理： useRef hook 返回一个可变的 ref 对象，该对象的 current 属性初始化为传递给 useRef 的参数。可以在组件的生命周期中修改 current 属性，而不会触发组件重新渲染。

自定义事件：发布/订阅模式

自定义事件就像家族的公告栏，大家可以在上面发布消息，也可以订阅自己感兴趣的消息。

适用场景：

组件之间需要进行解耦的通信。
多个组件需要监听同一个事件。

代码示例：

// 创建事件总线
const eventBus = {
  listeners: {},
  subscribe(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  },
  publish(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(callback => callback(data));
    }
  }
};

// 组件 A
function ComponentA() {
  const handleClick = () => {
    eventBus.publish('myEvent', 'Hello from Component A!');
  };

  return (
    <button onClick={handleClick}>Send Message</button>
  );
}

// 组件 B
function ComponentB() {
  const [message, setMessage] = React.useState('');

  React.useEffect(() => {
    eventBus.subscribe('myEvent', (data) => {
      setMessage(data);
    });
  }, []);

  return (
    <p>Message: {message}</p>
  );
}

原理： 通过一个全局的事件总线对象，组件可以发布自定义事件，其他组件可以订阅这些事件。当事件被发布时，所有订阅该事件的组件都会收到通知。

Vue 组件通信方式详解

Vue 组件通信也像家族关系，但 Vue 的处理方式更灵活一些。

Props（属性传递）：父传子

和 React 一样，Props 也是 Vue 中最基本的父组件向子组件传递数据的方式。

适用场景：

父组件需要向子组件传递数据，例如配置信息、回调函数等。
子组件只需要接收数据，不需要修改父组件的状态。

代码示例：

// 父组件
<template>
  <div>
    <ChildComponent :message="message" @click="handleClick" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, son!'
    };
  },
  methods: {
    handleClick() {
      alert('Button clicked in parent!');
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="$emit('click')">Click Me</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

原理： 父组件通过在子组件标签上使用 v-bind 指令（简写为 :），将数据传递给子组件。子组件通过 props 选项声明接收的数据。

$emit（自定义事件）：子传父

Vue 中使用 $emit 触发自定义事件，子组件通过这个方法告诉父组件发生了什么。

适用场景：

子组件需要通知父组件发生了某些事件，例如用户点击了按钮、输入框内容发生了变化等。
父组件需要根据子组件的操作来更新自己的状态。

代码示例：

// 父组件
<template>
  <div>
    <p>Message from child: {{ message }}</p>
    <ChildComponent @update="handleChildUpdate" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleChildUpdate(newMessage) {
      this.message = newMessage;
    }
  }
};
</script>

// 子组件
<template>
  <input type="text" :value="inputValue" @input="handleChange" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleChange(event) {
      const newValue = event.target.value;
      this.inputValue = newValue;
      this.$emit('update', newValue); // 触发自定义事件
    }
  }
};
</script>

原理： 子组件使用 $emit 方法触发一个自定义事件，并将数据作为参数传递给父组件。父组件通过 v-on 指令（简写为 @）监听这个事件，并在事件处理函数中接收子组件传递的数据。

Provide/Inject（依赖注入）：跨层级传递

Provide/Inject 类似于 React 的 Context，允许跨越多个层级的组件共享数据。

适用场景：

需要在多个组件之间共享数据，而这些组件之间又没有直接的父子关系。
避免通过 props 逐层传递数据，简化组件结构。例如，主题颜色、用户身份验证信息等。

代码示例：

// 父组件（Provider）
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      theme: 'dark'
    };
  }
};
</script>

// 子组件（Consumer）
<template>
  <div>
    <GrandChildComponent />
  </div>
</template>

<script>
import GrandChildComponent from './GrandChildComponent.vue';

export default {
  components: {
    GrandChildComponent
  }
};
</script>

// 孙子组件（使用 Inject）
<template>
  <div>
    Theme: {{ theme }}
  </div>
</template>

<script>
export default {
  inject: ['theme']
};
</script>

原理： 使用 provide 选项在父组件中提供数据。使用 inject 选项在子组件中注入数据。

Vuex（状态管理）：全局状态共享

Vuex 是 Vue 官方推荐的状态管理库，类似于 React 的 Redux。

适用场景：

大型应用，需要管理复杂的状态。
多个组件需要共享和修改同一个状态。
需要实现可预测的状态变化和调试。

代码示例：

// 创建 store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

// 组件中使用 Vuex
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

原理： Vuex 通过单一数据源（store）来管理应用的状态。组件可以通过 dispatch action 来触发状态的改变，并通过 getter 获取状态的值。

$refs（引用）：直接访问 DOM 元素或子组件实例

$refs 允许父组件直接访问子组件的 DOM 元素或组件实例。

适用场景：

直接访问 DOM 元素，例如获取焦点、滚动到指定位置等。
调用子组件的方法。

代码示例：

// 父组件
<template>
  <div>
    <input type="text" ref="myInput" />
    <ChildComponent ref="myChild" />
    <button @click="handleClick">Focus Input</button>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      this.$refs.myInput.focus(); // 获取焦点
    },
    callChildMethod() {
      this.$refs.myChild.myMethod(); // 调用子组件的方法
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <p>Child Component</p>
  </div>
</template>

<script>
export default {
  methods: {
    myMethod() {
      alert('Child method called!');
    }
  }
};
</script>

原理： 通过在组件标签上使用 ref 属性，可以为组件创建一个引用。父组件可以通过 $refs 对象访问这些引用。

EventBus（事件总线）：发布/订阅模式

和 React 一样，Vue 也可以使用 EventBus 实现组件间的解耦通信。

适用场景：

组件之间需要进行解耦的通信。
多个组件需要监听同一个事件。

代码示例：

// 创建事件总线
const EventBus = new Vue();

// 组件 A
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('myEvent', 'Hello from Component A!');
    }
  }
};
</script>

// 组件 B
<template>
  <p>Message: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    EventBus.$on('myEvent', (data) => {
      this.message = data;
    });
  }
};
</script>

原理： 通过创建一个 Vue 实例作为事件总线，组件可以使用 $emit 方法发布事件，使用 $on 方法订阅事件。

总结：React vs Vue 组件通信方式对比

为了方便大家理解，我把 React 和 Vue 的组件通信方式整理成了一个表格：

通信方式	React	Vue	适用场景
Props	Props (属性传递)	Props (属性传递)	父组件向子组件传递数据。
子传父	Callback (回调函数)	$emit (自定义事件)	子组件需要通知父组件发生了某些事件。
跨层级传递	Context (上下文)	Provide/Inject (依赖注入)	需要在多个组件之间共享数据，而这些组件之间又没有直接的父子关系。
全局状态管理	Redux/Mobx (状态管理)	Vuex (状态管理)	大型应用，需要管理复杂的状态。多个组件需要共享和修改同一个状态。需要实现可预测的状态变化和调试。
访问 DOM	useRef (引用)	$refs (引用)	直接访问 DOM 元素或子组件实例。
解耦通信	自定义事件 (发布/订阅模式)	EventBus (事件总线)	组件之间需要进行解耦的通信。多个组件需要监听同一个事件。

选择合适的通信方式

选择哪种组件通信方式，取决于你的具体需求。

简单的数据传递： 使用 Props。
子组件需要通知父组件： 使用 Callback (React) 或 $emit (Vue)。
跨层级的数据共享： 使用 Context (React) 或 Provide/Inject (Vue)。
复杂的状态管理： 使用 Redux/Mobx (React) 或 Vuex (Vue)。
直接访问 DOM 元素： 使用 useRef (React) 或 $refs (Vue)。
解耦的组件通信： 使用自定义事件 (React) 或 EventBus (Vue)。

结束语

好了，今天的组件通信讲座就到这里。希望通过今天的讲解，大家能够对 React 和 Vue 的组件通信方式有更深入的了解。记住，没有最好的通信方式，只有最合适的通信方式。根据你的项目需求，选择最合适的方案，才能让你的代码更加简洁、高效、易于维护。

祝大家 Bug 越来越少，代码越来越漂亮！下课！

发表回复 取消回复

发表回复取消回复