Reactjs 组件之间的通信

Communication between Reactjs Components

本文关键字：通信 之间 组件 Reactjs      更新时间：2023-09-26

在与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 作为数据发送，它完美地渲染了所需的组件，我可以调用渲染，而无需任何发布/订阅或深层传递 props 来调用带有更改 this.setState 的父方法以导致重新渲染。

到目前为止，该应用程序运行良好，我也喜欢它的简单性。请阐明这种技术的优缺点

问候

编辑：

调用 render 很糟糕，所以我将其更改为另一种方法以获得此设置的更多优缺点。

此设置的两个主要问题：
1. 永远不要直接
调用 react 生命周期方法 2. 组件的后门是一个坏主意，这会破坏 react 的可维护性

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

危险是：

  • 许多带有反应组件的设计严重依赖于所触发的生命周期方法：getInitialState()、componentWillReceiveProps()、shouldComponentUpdate()、componentDidMount()等。如果您直接呼叫render()，许多组件可能会损坏或显示奇怪的行为。
  • 你冒着破坏 react 差异引擎的风险：通过生命周期管理，react 在其（内部）内存中保留了 DOM 的虚拟副本。为了正常工作，此副本的完整性对于 React 的工作至关重要。

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

  • 在组件中包含不同的方法。
  • 如果要重新渲染，则setState()。
  • 并从外部调用该方法。

广告 2.直接引用已挂载的组件（如 thisManager 所做的）有一些额外的风险。React 的设计和限制是有原因的：用 props 和状态维护单向流和组件层次结构，使事情易于维护。

如果你打破了这种模式——通过在允许操纵状态的组件中构建一个后门——你就打破了反应的这个设计原则。这是一个快速的快捷方式，但当你的应用增长时，肯定会造成巨大的痛苦和沮丧。

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

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

因此，如果您想将其用于该目的，那么您应该没问题。警告：标准 react 方法保护对组件的随机访问，因为调用组件或方法需要对组件的引用。在这两个示例中，都可以使用此类参考。
在您的设置中，任何外部代码段都可以查找表中"标头"的引用，并调用更新状态的方法。有了这种间接引用，并且无法知道哪个源实际调用了您的组件，您的代码可能会变得更加难以调试/维护。

相关文章：