Question

我想知道这两种定义React组件属性的方法有什么区别：

var something = React.createClass({
    SSEStream: new EventSource("/stream/"),

    componentDidMount: function() {                                                               
        this.SSEStream.addEventListener("message", function(msg) {                        
            // do something
    }.bind(this));
});

var something = React.createClass({
    componentDidMount: function() {
        this.SSEStream = new EventSource("/stream/");

        this.SSEStream.addEventListener("message", function(msg) {
            // do something
        }.bind(this));
    }                                                                  
});

请注意React组件属性SSEStream的定义方式不同。我的猜测是，在第二个示例中，每次重新渲染组件时都会重新创建属性，而在第一个示例中，它只创建一次，因此第一种方式应该是首选。

所以问题是，两者之间是否会有最微小的差异？

Answer 1

两者的区别如下：

第一个实例化并在声明组件时设置一个EventSource，它在组件的每个实例之间共享。

另一方面，当回调被触发时，第二个为组件的每个实例创建一个单独的EventSource。

假设您希望组件的多个实例彼此独立，那么我猜第二个选项就是您想要的。

顺便说一下，componentDidMount回调通常只在组件的生命周期中运行一次，首次安装组件时，这与重新渲染无关。

在React.js中定义属性

1 个答案: