Question

使用ES6语法时，将firebase数据加载到react项目中的“最佳实践”是什么？ es6中不支持mixin，因此反应似乎不是一个选项

我采用了这种方法，但它确实不优雅，我想听听一些可行的解决方案。 this.items在构造函数方法

中声明为this.items = []

componentWillMount() {
        this.firebaseRef = new Firebase(SETTINGS.FIREBASEURL + 'todos');

        let self = this;
        this.firebaseRef.on('child_added', function(snapshot) {
            self.items.push(snapshot.val());
            self.setState({data: self.items});
        });
    }

componentDidMount() {
        let self = this;

        let intVal = setInterval(function() {
            if (self.items.length > 0){
                self.setState({data: self.items});
                self.forceUpdate();
                clearInterval(intVal);
            }
        }, 200);
    }

componentWillUnmount() {
        this.firebaseRef.off();
}

render() {
        console.log(this.state.data);
        return <p>Hello, Kitty</p>;
}

当我将其加载到浏览器中时，我将更新数据两次。如何避免使用forceUpdate()来显示我的state.data？

Answer 1

从React网站上查看：https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins。

现在看起来你必须在这种特殊情况下使用旧语法！

有关更新问题，请查看生命周期的componentShouldUpdate方法。 https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Answer 2

我刚开始研究同样的问题，而我遇到的所有其他答案都指向了另一个问题：

https://github.com/tylermcginnis/re-base

来自作者：

ReactFire的问题是因为它使用了Mixins，它与ES6类不兼容。在与Jacob Turner聊天之后，我们想要创建一种方法，允许ReactFire与ES6类的单向绑定，以及一些更多的功能，如双向数据绑定和监听Firebase端点，而不实际绑定状态属性。因此，重建了基地。

反应es6和firebase加载数据

2 个答案: