React.js 中的混合和重复方法

Mixins and duplicate methods in React.js

本文关键字:方法 混合 js React      更新时间:2023-09-26

越来越了解 React 的出色之处.js我开始更多地使用 Mixins。

我注意到的一件事是,我的 mixin 我的组件都可以有一个componentDidMount的方法——并且这两个函数都将被调用,因此在组件中定义它不会覆盖 mixin 中的函数,反之亦然。

下面是一个示例:

var MyMixin = {
    componentDidMount: function() {
        // Do something when component is mounted
        console.log("Mixin fn ran");
    }   
};
var Component = React.createClass({
    mixins: [MyMixin],
    componentDidMount: function() {
        // Do something when component is mounted
        console.log("Component fn ran");
    }
});

现在,问题是这是设计使然还是只是巧合。生命周期方法非常有用(例如绑定和解绑定事件(,因此我的组件和 mixins 都希望依赖这些方法的情况并不少见。文档对此没有任何说明,我想知道这样做是否会让自己度过一段糟糕的时光。

另一个问题是,我是否可以控制首先调用哪个方法?混合中的一个或组件中的一个。

是的,这是有意为之的,也是使 mixins 在 React 中非常强大的主要因素。

所以发生的事情是:

  • 对于"component...">函数,它们按mixin[0],mixins[1],...,组件的顺序调用
  • propTypes ,并合并 getInitialStategetDefaultProps 的返回值
  • 其他冲突的方法名称,或合并上述方法时发生冲突会导致错误