Angular 世界中 React 的“$emit”是什么答案

【问题标题】：What's React's "$emit" as in Angular worldAngular 世界中 React 的“$emit”是什么
【发布时间】：2016-04-03 11:55:01
【问题描述】：

在 Angular 中，我们可以使用 $scope.$emit 方法来通知祖先。我们如何在 React 中做同样的事情？

【问题讨论】：

您是否试图触发某个生命周期事件或属于某个祖先类的函数？
是的。想象一下，我有一个深度视图树。在一个叶子节点中有一个按钮，当点击这个按钮时，我需要根视图切换到一个新的视图。
我不认为有发射这样的东西。 React 是一种非常不同的思维方式。状态应该通过这些祖先传递，直到它到达按钮。因此，在那个控制视图的祖先中，它会看到一个新状态并切换视图。这就是我的想法。

标签： angularjs events reactjs emit

【解决方案1】：

简单的解决方案是将回调从父级传递给子级到孙子级，等等......当下降调用回调时，它将在父级的上下文中运行。

class Parent extends React.Component {
  constructor() {
    this.click = this.click.bind(this); // bind the handler to this
  }
  
  click(view) {
    this.setState({ view }); // change the state
  }
  
  render() {
    return <Child clickHandler={ this.click } />; // pass CB to child
  }
}

class Child extends React.Component {
  render() {
    return <GrandChild clickHandler={ this.props.clickHandler } />;  // pass CB to grandChild
  }
}

class GrandChild extends React.Component {
  render() {
    return <button onClick={ () => this.props.clickHandler('nextViewId') }>Click</button>; // invoke CB on click
  }
}

问题在于，如果您有一个大型组件树，则必须将多个回调传递到多个级别。这意味着每个容器都可以有多个属性，这些属性只是传递 CB，使得测试和维护变得非常困难。将此解决方案用于小型应用程序。

对于大型应用程序，您应该使用基于Flux 的架构，例如redux。粗略的想法是，每个动作都由调用组件分派，并由主存储处理，主存储创建一个新模型，并将其传输到组件树的根。通过这种方式，每个组件都可以获得它需要的所有数据，并且可以按照自己的意愿进行处理。这感觉有点像使用 Angular 的 $broadcast 到根目录。

【讨论】：