Javascript ReactJS:Rebase helper文件管理器，用于收集方法调用

我一直在努力找出如何将

ReactJS

和

firebase

（3）结合起来

幸运的是，我找到了令人敬畏的再基础回购，这是令人敬畏的，正是我想要的

fb-config.js

app.js

import React，{Component}来自'React'；
从“fb配置”导入基；
从“./components/ExampleComponent”导入ExampleComponent；
类应用程序扩展组件{
构造函数（）{
超级（）；
//getInitialState
此.state={
DB:{}
};
}
componentDidMount（）{
this.ref=base.syncState（'demo'，
{背景：这，
状态：'DB'}
);
}
组件将卸载（）{
基本移除绑定（此.ref）；
}
render（）{
返回(
)
}
}
导出默认应用程序

components/ExampleComponent.js

import React，{Component}来自'React'；
从“../fb config”导入基数；
类ExampleComponent扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
this.pushing=this.pushing.bind（this）；
}
推{
const now=new Date（）.getTime（）；
让数据={}；
data[now.toString（16）]='Hello World'；
base.fetch（'demo'{
背景:这,，
阿萨雷：错
})。然后（快照=>{
数据={…快照，…数据}；
base.post（'demo'，{data}）
.then（（）={console.log（“pushed”）}）；
});
} 
render（）{
返回(
推
)
}
};
导出默认示例组件；

---

此设置有效。但是我想把push方法移到另一个文件（比如

fb commands.js

）。我该怎么做？

您可以按原样移动

推送

，只需将

上下文

传递给函数，因为它无法通过

此

访问组件实例

// 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;

//fb-commands.js
导出常量推送=（上下文）=>{
const now=new Date（）.getTime（）；
让数据={}；
data[now.toString（16）]='Hello World'；
base.fetch（'demo'{
上下文：上下文，
阿萨雷：错
})。然后（快照=>{
数据={…快照，…数据}；
base.post（'demo'，{data}）
。然后（（）=>console.log（“push”）；
});
};
//components/ExampleComponent.js
从“React”导入React，{Component}；
从“../fb config”导入基数；
从“path/to/fb命令”导入{pushing}；
类ExampleComponent扩展组件{
render（）{
返回(
推（这个）}>推
);
}
}
导出默认示例组件；

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

方法1：通过ES6导入/导出（简单） 阿内胡戈在书中很好地描述了这一点

只需导出

将

功能推送到模块，然后导入并直接使用即可。传递

此

上下文或所需的任何其他参数

如果你想分享实用功能，听起来很棒

---

方法2：通过混合。 这不是一个好的做法

另外，当使用以ES6语法编写的React组件时，不支持mixin。此外，他们在React中不支持ES6类。原因是他们是

所以，混血儿就要离开了

---

方法3：通过合成（高级） 如果您需要实现更高级的东西，那么这是最好的选择，只需重新使用常用方法即可。让我们假设，如果您想要：

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

然后，输入合成和高阶组件

高阶组件只是一个函数，它接受现有组件并返回另一个封装该组件的组件

您可以使用这种方法包装组件，不仅共享通用代码/逻辑，还可以共享数据、操作状态、道具等

有关此主题的更多信息，您可以在上阅读

---

结论

• 如果您只需要一个助手方法抽象，请使用方法#1
• 不要使用方法2
如果你想要更多的东西，那就考虑应用方法3。

---

这可能是一个新手问题，但我为什么不在箭头函数中使用

上下文

？它如何自动变为

此

？在您的示例中，

推送

绑定到react组件实例，因此在

内推送

此

引用组件实例。在我的示例中，我将引用作为第一个参数传递给react组件实例，而不是绑定

并将
推送到react组件实例（您仍然可以这样做*btw，但逻辑性要差一点）。在这两种情况下，传递给
base.fetch（…）
的对象上的
context
属性引用react组件实例。（（*）如果要绑定函数的
this
，它不能像我使用的那样是箭头函数。）
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

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
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;