Question

在与Redux，flux和其他pub / sub方法挣扎太多之后，我最终得到了以下技术。我不知道这是否会造成一些重大损失或瑕疵，所以在这里张贴以获得有经验的程序员关于其利弊的一些启示。

var thisManager = function(){

    var _Manager = [];
    return{
        getThis : function(key){
            return  _Manager[key];
        },
        setThis : function(obj){            
            _Manager[obj.key] = obj.value;
        }
    }
};
var _thisManager = new thisManager();

// React Component
class Header extends Component{
   constructor(){
      super();
      _thisManager.setThis({ key: "Header", value:this}
   }
    someFunction(data){
        // call this.setState here with new data. 
   }
   render(){
      return <div />
   }
}

// Then from any other component living far somewhere you can pass the data to the render function and it works out of the box. 
i.e. 

class Footer extends Component{
  _click(e){
     let Header = _thisManager.getThis('Header');
     Header.somefunction(" Wow some new data from footer event ");
  }
 render(){
      return(
      <div>
          <button onClick={this._click.bind(this)}> send data to header and call its render </button>
      </div>


      );
  }
}

我在我的应用程序中发送json作为数据，它完美呈现所需的组件，我可以调用渲染而不需要任何pub / sub或深度传递道具来调用父方法，并更改this.setState以导致重新渲染。

到目前为止，该应用程序运行良好，我也很喜欢它的简单性。请注意这项技术的利弊

此致

编辑：

调用渲染是不好的，所以我将其更改为另一种方法以获得此设置的更多优缺点。

Answer 1

此设置的两个主要问题：
的 1。您不应该直接调用反应生命周期方法
的 2。后门组件是一个坏主意，它会破坏反应的可维护性

广告1： 如果直接调用render()（或任何其他反应方法），则可能不会在组件树中调用componentDidMount()，componentDidUpdate（）和其他生命周期方法。

危险是：

许多带有反应组件的设计在很大程度上依赖于被激活的生命周期方法：getInitialState()，componentWillReceiveProps()，shouldComponentUpdate()，componentDidMount()等等。如果您致电{{1直接地，许多组件可能会破坏或显示出奇怪的行为。
您冒着破坏反应差异引擎的风险：通过生命周期管理，react会在其（内部）内存中保留DOM的虚拟副本。为了正常工作，这个副本的完整性对于做出反应是至关重要的。

更好（但仍违反我的第二点）：

在组件中包含不同的方法。
如果要重新渲染，则其中包含render()。
从外面打电话给那个方法。

广告2。 直接引用已安装的组件（如您的thisManager所做的那样）还有一些额外的风险。 React的设计和限制有一个原因：使用props和state来维护单向流和组件层次结构，以便于维护。

如果你打破这种模式 - 通过在组件中构建一个允许操纵状态的后门 - 你可以打破这种反应的设计原则。这是一个快速的快捷方式，但是当您的应用程序增长时，肯定会带来巨大的痛苦和挫败感。

据我所知，此规则唯一可接受的例外是：

响应ajax调用结果的组件内部的方法，以更新状态（例如，从服务器获取数据后）
组件内部处理来自其直接后代子组件的触发器的方法（例如，在单击子按钮后在窗体上运行验证）

因此，如果您想将其用于此目的，那么您应该没问题。警告：标准反应方法保护对组件的随机访问，因为调用组件或方法需要具有对组件的引用。在这两个例子中都有这样的参考资料在您的设置中，任何外部代码都可以在参考号中查找＆＃34;标题＆＃34;在您的表中，并调用更新状态的方法。有了这样的间接引用，并且无法确定哪个源实际上调用了您的组件，您的代码可能会变得更难以调试/维护。

Reactjs组件之间的通信

1 个答案: