ReactJS：重新编写用于集合方法调用的辅助文件管理器

Question

我一直在努力弄清楚如何合并ReactJS和firebase（3）。

幸运的是，我找到了令人敬畏的重基地回购，这真是太棒了，而且正是我想要的。

  

FB-config.js

var Rebase = require('re-base');
var base = Rebase.createClass({
      apiKey: "apiKey",
      authDomain: "projectId.firebaseapp.com",
      databaseURL: "https://databaseName.firebaseio.com",
      storageBucket: "bucket.appspot.com",
      messagingSenderId: "xxxxxxxxxxxxxx"
});
export default base;

  

app.js

import React, { Component } from 'react';
import base from 'fb-config';
import ExampleComponent from './components/ExampleComponent';

class App extends Component {
constructor() {
  super();
    // getInitialState
    this.state = {
      DB: {}
    };
}

componentDidMount() {
  this.ref = base.syncState('demo',
  { context: this,
    state: 'DB' }
  );
}

componentWillUnmount() {
  base.removeBinding(this.ref);
}

render() {
  return (
    <ExampleComponent />
  )
}

}

export default App

  

组件/ ExampleComponent.js

import React, { Component } from 'react';
import base from '../fb-config';

class ExampleComponent extends Component {
  constructor(props, context){
    super(props, context);

    this.pushing = this.pushing.bind(this);
  }

  pushing() {
    const now = new Date().getTime();
    let data = {};
    data[now.toString(16)] = 'Hello World';

    base.fetch('demo', {
      context: this, 
      asArray: false
    }).then( snapshot => {
      data = {... snapshot, ...data};
      base.post('demo', {data})
      .then( () = { console.log("pushed") });

    });
  } 

  render() {
    return (
      <button onClick={this.pushing}>PUSH</button>
    )
  }

};

export default ExampleComponent;

此设置有效。但我想将推送方法移动到另一个文件（如fb-commands.js）。我该怎么做？

Answer 1

您可以按原样移动pushing，您只需将context传递给该函数，因为它无法通过this访问组件实例。

// fb-commands.js
export const pushing = (context) => {
    const now = new Date().getTime();
    let data = {};
    data[now.toString(16)] = 'Hello World';

    base.fetch('demo', {
         context: context, 
         asArray: false
    }).then( snapshot => {
        data = {... snapshot, ...data};
        base.post('demo', {data})
       .then(() => console.log("pushed"));
    });
};

// components/ExampleComponent.js
import React, { Component } from 'react';
import base from '../fb-config';
import {pushing} from 'path/to/fb-commands';

class ExampleComponent extends Component {
    render() {
        return (
            <button onClick={() => pushing(this)}>PUSH</button>
        );
    }
}

export default ExampleComponent;

Answer 2

根据我的经验，我可以想到3种方法（可能还有更多）。

方法＃1：通过ES6导入/导出（简单）

ArneHugo在his answer中很好地描述了它。

只需导出 pushing功能到模块，然后导入并直接使用它。通过this上下文或任何其他所需的参数。

如果您想共享实用程序功能，对我来说听起来很棒。

方法＃2：通过Mixins。

这不是一个好习惯。

另外，使用用ES6语法编写的React组件时不支持mixins。而且，他们不会在React中支持ES6类。原因是它们是considered harmful。

所以，mixins即将退出。

方法＃3：通过组合（高级）

如果您需要实现更高级的东西，然后重新使用常用方法，那么这是最好的选择。假设你想要：

• 重用逻辑和引导抽象
• 渲染Highjacking
• 进行状态抽象和操作
• 做道具操纵

然后，输入Composition和高阶组件！

高阶组件只是一个接受现有组件并返回另一个组件的函数。

您可以使用此方法来包装组件，不仅可以共享公共代码/逻辑，还可以共享数据，操作状态，道具等。

有关此主题的更多信息，请参阅franleplant's great post here。

结论

• 如果您只需要帮助方法抽象 - 请使用方法＃1。
• 切勿使用方法＃2。
• 如果你想要更多的东西 - 考虑应用方法＃3。