ReactJS全局辅助功能

Question

问题：我有很多小型辅助功能，不一定需要生活在一个组件中（或者它们可以，但它们会使该组件大量的代码肿起来）。我懒惰的一面只想让所有这些都只是让所有这些都成为组件可以调用的某种全局功能。我真的想制作良好的ReactJS代码。

问题：在ReactJ中，全球辅助功能方面的最佳实践是什么？我应该将它们迫使它们成某种组件，还是将它们推入其他组件？

基本示例：

function helperfunction1(a, b) {
    //does some work
    return someValue;
}
function helperfunction2(c, d) {
    //does some work
    return someOtherValue;
}
function helperfunction3(e, f) {
    //does some work
    return anotherValue;
}
function helperfunction4(a, c) {
    //does some work
    return someValueAgain;
}

var SomeComponent =
    React.createClass({
        //Has bunch of methods
        //Uses some helper functions
        render: function () {
        }
    });
var SomeOtherComponent =
    React.createClass({
        //Has bunch of methods
        //Uses some helper functions
        render: function () {
        }
    });

Answer 1

您可以从文件中导出多个函数，无需反应本身：

helpers.js：

export function plus(a, b) {
  return a + b;
}
export function minus(a, b) {
  return a - b;
}
export function multiply(a, b) {
  return a * b;
}
export function divide(a, b) {
  return a / b;
}

您可以导入所需的功能：

import { multiply, divide } from './Helpers'

Answer 2

您可以使用 webpack >或 browserify 的模块捆绑工具。将可重复使用的功能放在commonjs模块中。

不使用Mixins ，它们可能会在接下来的版本中弃用，因为没有标准的方法可以用ES6语法声明Mixins，他们更喜欢等待ES7，可能会标准化Mixins标准化Mixins。除非使用React LifeCycle的方法，否则毫无意义地将可重复使用的代码耦合到反应。

Answer 3

您可以使用modulejs。或者，您可以使用Mixins（https://facebook.github.io/react/docs/reusable-components.html#mixins）

Mixins的样本：https：//jsfiddle.net/q88yzups/1/

var MyCommonFunc = {
    helperFunction1: function() {
       alert('herper function1');
    },
    doSomething: function(){
        alert('dosomething');
    }
}
var Hello = React.createClass({
    mixins: [MyCommonFunc],
    render: function() {
        this.doSomething();
        return <div onClick={this.helperFunction1}>Hello {this.props.name} </div>;
    }
});
React.render(<Hello name="World" />, document.getElementById('container'));

Answer 4

只是另一个选项，如果您不想拆分为单独的模块，则可以在您的父部件中创建一个私有方法，例如下面，并在此组件中自由使用或传递给通过道具的儿童组件..

var YourComponent = React.createClass({
    globalConfig: function() {
        return {
            testFunc: function () {
                console.log('testing...');
            },
        };
    }(),
    ......
    render: function() {
        this.globalConfig.testFunc(); // use directly
        <ChildComponent testFunc={this.globalConfig.testFunc} /> // pass to child
    .....

都没有测试，但这就是想法...

Answer 5

使用反应上下文来执行这样的事情。它是为此确切用例而构建的；文档：https：//reactjs.org/docs/context.html

Answer 6

可以完全避免反应，就像Michiel所说尽管略有改进是将所有这些纯JS功能都放在单个fle中，然后将其连接到您的HTML启动页面，并且这些功能将在任何地方可用：

只是用

<script src='./global-func.js' ></script>

它是一个肮脏的骇客，但有效;）

您不必将文件导入到您制作的每个组件类中