微信小程序：搞定爷孙组件通讯，原来还可以这样

2024-02-21 22:24:05

高效实现微信小程序爷孙组件通讯

在微信小程序开发中，实现组件之间的通讯至关重要。对于爷孙组件，确保它们之间的通讯高效且可靠尤为重要。本文将探讨三种实现此目的的方法：状态管理、provide/inject API 和发布订阅模式。

状态管理

状态管理是一种经典方法，它通过将共享数据存储在一个中心化的状态库中来实现组件通讯。微信小程序中，可以使用 Redux 或 MobX 等状态管理库。这种方法对于需要在组件之间共享大量数据或频繁更新数据的情况非常有用。

代码示例：

// store.js
const store = Redux.createStore(reducer);

// component1.js
import { connect } from 'react-redux';

const mapStateToProps = (state) => ({
  count: state.count
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Component1);

// component2.js
import { connect } from 'react-redux';

const mapStateToProps = (state) => ({
  count: state.count
});

export default connect(mapStateToProps)(Component2);

provide/inject API

provide/inject API 是微信小程序中实现组件通讯的一种较新方法。它通过在组件之间建立父子关系，然后使用 provide/inject API 传递数据。这种方法适用于需要在组件之间传递少量数据或不频繁更新数据的情况。

代码示例：

// component1.js
import { provide, inject } from 'react';

const MyContext = React.createContext();

export default function Component1() {
  const value = 'hello world';

  return (
    <MyContext.Provider value={value}>
      <Component2 />
    </MyContext.Provider>
  );
}

// component2.js
import { inject } from 'react';

const MyContext = React.createContext();

export default function Component2() {
  const value = inject(MyContext);

  return (
    <div>{value}</div>
  );
}

发布订阅模式

发布订阅模式是一种基于事件的组件通讯方式。发布者通过发布事件通知订阅者，订阅者通过订阅事件接收发布者的数据。这种方法适用于需要在组件之间进行事件通信的情况。

代码示例：

// component1.js
import { EventChannel } from 'react-native';

export default function Component1() {
  const eventChannel = new EventChannel((emitter) => {
    emitter({ data: 'hello world' });
  });

  return (
    <Component2 eventChannel={eventChannel} />
  );
}

// component2.js
import { EventChannel } from 'react-native';

export default function Component2({ eventChannel }) {
  useEffect(() => {
    const subscription = eventChannel.listen((data) => {
      console.log(data);
    });

    return () => subscription.remove();
  }, [eventChannel]);

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