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

Question

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

Answer 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 based architecture, such as redux。粗略的想法是每个动作都由调用组件分派，并由创建新模型的主存储处理，并将其传输到组件树的根。通过这种方式，每个组件都获得了它需要的所有数据，并且可以随心所欲地处理它。这感觉有点像使用 Angular 的 $broadcast 到根。

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

What's React's "$emit" as in Angular world

angularjs

events

reactjs

emit