React es6 和 firebase 加载数据答案

【问题标题】：React es6 and firebase loading dataReact es6 和 firebase 加载数据
【发布时间】：2016-01-11 22:12:21
【问题描述】：

在使用 ES6 语法时，将 firebase 数据加载到 React 项目中的“最佳实践”是什么？ es6 不支持 mixin，所以 reactfire 似乎不是一个选项

我采用了这种方法，但它确实不太优雅，我想听听一些可能的解决方案来解决这个问题。 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？

【问题讨论】：

您不必在componentDidMount() 中执行任何操作。每当添加一个孩子时，您已经调用了setState()，它将更新 UI 中的组件。如果这不起作用，您可以设置一个显示问题的 jsfiddle/jsbin 吗？

标签： reactjs firebase

【解决方案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

【讨论】：

是的，我之前看过文档，但我认为必须有足够的时间来执行此操作。感谢您的回答

【解决方案2】：

我刚开始研究同样的问题，我遇到的所有其他答案都指向这个替代方案：

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

来自作者：

ReactFire 的问题是因为它使用 Mixins，它与 ES6 类不兼容。在与 Jacob Turner 交谈之后，我们想要创建一种方法来允许 ReactFire 与 ES6 类的单向绑定以及更多功能，例如双向数据绑定和侦听 Firebase 端点，而无需实际绑定状态属性。于是，re-base 就建立起来了。

【讨论】：