与父节点通信的react.js自定义事件

Question 1

我正在制作并监听正常的DOMCustomEvent以便与父节点通信：

在儿童中：

  var moveEvent = new CustomEvent('the-graph-group-move', { 
    detail: {
      nodes: this.props.nodes,
      x: deltaX,
      y: deltaY
    },
    bubbles: true
  });
  this.getDOMNode().dispatchEvent(moveEvent);

在父母中：

componentDidMount: function () {
  this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup);
},

这可行，但是有一个特定于React的方法会更好吗？

Question 2

如上所述：

React的方式是通过props将回调显式传递给子级。在React中不支持带有冒泡的自定义事件。

反应式编程抽象是正交的：

利用观察者模式对交互式系统进行编程是困难且容易出错的，但仍然是许多生产环境中的实现标准。我们提出一种逐渐弃用观察者的方法，以支持反应式编程抽象。几个库层可帮助程序员将现有代码从回调平稳地迁移到更具声明性的编程模型。

React哲学基于Command模式：

参考文献

Question 3

您可以编写一个简单的服务然后使用它

/** eventsService */
module.exports = {
  callbacks: {},

  /**
   * @param {string} eventName
   * @param {*} data
   */
  triggerEvent(eventName, data = null) {
    if (this.callbacks[eventName]) {
      Object.keys(this.callbacks[eventName]).forEach((id) => {
        this.callbacks[eventName][id](data);
      });
    }
  },

  /**
   * @param {string} eventName name of event
   * @param {string} id callback identifier
   * @param {Function} callback
   */
  listenEvent(eventName, id, callback) {
    this.callbacks[eventName][id] = callback;
  },

  /**
   * @param {string} eventName name of event
   * @param {string} id callback identifier
   */
  unlistenEvent(eventName, id) {
    delete this.callbacks[eventName][id];
  },
};

示例（与触发相同）

import eventsService from '../../../../services/events';
export default class FooterMenu extends Component {
  componentWillMount() {
    eventsService
      .listenEvent('cart', 'footer', this.cartUpdatedListener.bind(this));
  }

  componentWillUnmount() {
    eventsService
      .unlistenEvent('cart', 'footer');
  }

  cartUpdatedListener() {
    console.log('cart updated');
  }
}

Question 4

您可以通过上下文传递的回调使事件冒泡：[CodePen]

import * as React from 'react';

const MyEventContext = React.createContext(() => {});

const MyEventBubbleContext = ({children, onMyEvent}) => {
  const bubbleEvent = React.useContext(MyEventContext);
  const handleMyEvent = React.useCallback((...args) => {
    // stop propagation if handler returns false
    if (onMyEvent(...args) !== false) {
      // bubble the event
      bubbleEvent(...args);
    }
  }, [onMyEvent]);
  return (
    <MyEventContext.Provider value={handleMyEvent}>
      {children}
    </MyEventContext.Provider>
  );
};

const MyComponent = () => (
  <MyEventBubbleContext onMyEvent={e => console.log('grandparent got event: ', e)}>
    <MyEventBubbleContext onMyEvent={e => console.log('parent got event: ', e)}>
      <MyEventContext.Consumer>
        {onMyEvent => <button onClick={onMyEvent}>Click me</button>}
      </MyEventContext.Consumer>
    </MyEventBubbleContext>
  </MyEventBubbleContext>
);

export default MyComponent;

Question 5

我发现还有另外一个非常合理的方法，特别是如果从父母到孩子到孩子的钻洞已经很麻烦。他称其为简单沟通。这是链接：

https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md

Question 6

一个可能的解决方案，如果您绝对必须使用ReactJs应用程序中的Observer模式，则可以劫持一个正常事件。例如，如果您希望Delete键导致<div>标记为删除的a键，则可以<div>监听一个keydown事件，该事件将由customEvent调用。将keydown捕获到主体上，并customEvent在选定的上调度keydown事件<div>。分享以防万一。

Question 7

中央存储[Redux]将状态分配给客户端，然后将状态“分派”回存储，这也类似于观察者模式。由于连接道具/事件路径的显式（脆弱的？）开销，使得发布/订阅的方法只会变得更糟。为了破解层次结构，React提供了上下文（提供者模式）或可观察到的令人讨厌的库。就像MobX引入了新的装饰器@observable或Vue引入了新的模板语法“ v-if”。无论如何，事件是DOM和javascript事件循环工作的主要方式，所以为什么不呢？我认为撒旦主义者做到了。大声笑

Question 8

我知道这个问题到现在为止已经很老了，但是这个答案可能仍然会对某人有所帮助。我为React写了一个JSX杂注，其中添加了声明式自定义事件：jsx-native-events。

基本上，您只是使用该onEvent<EventName>模式来监视事件。

<some-custom-element onEventSomeEvent={ callback }></some-custom-element>