Глобальные вспомогательные функции ReactJs

Вопрос: У меня есть много мелких вспомогательных функций, которые необязательно должны жить в компоненте (или, может быть, они могут, но они сделают этот компонент раздутым с большим количеством кода). Моя ленивая сторона просто хочет просто позволить этим всем быть какие-то глобальные функции, которые могут вызвать компоненты. Я действительно хочу создать хороший код ReactJs.

Вопрос: Каковы наилучшие практики с точки зрения глобальных вспомогательных функций в Reactjs? Должен ли я вставлять их в какой-то компонент или просто вставлять их в другие компоненты?

Основной пример:

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 () {

        }

    });

Ответ 1

Для этого можно использовать инструмент для связывания модулей, например Webpack или Browserify. Поместите свои функции повторного использования в модуль CommonJS.

Не используйте Mixins, они, вероятно, будут устаревать в следующих версиях React, поскольку нет стандартного способа объявить mixins в React с синтаксисом ES6, и они предпочитают ждать ES7, который, вероятно, будет стандартизировать mixins, И нет смысла связывать ваш многоразовый код с React, если он не использует методы жизненного цикла React.

Ответ 2

Вы можете использовать modulejs. или вы можете использовать mixins (https://facebook.github.io/react/docs/reusable-components.html#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'));

Ответ 3

Еще один вариант, если вы не хотите разбивать на отдельный модуль, вы можете создать частный метод в своем родительском компоненте, как показано ниже, и свободно использовать этот компонент или передать дочерние компоненты через реквизиты.

var YourComponent = React.createClass({

    globalConfig: function() {
        return {
            testFunc: function () {
                console.log('testing...');
            },
        };
    }(),

    ......
    render: function() {
        this.globalConfig.testFunc(); // use directly

        <ChildComponent globalConfig={this.globalConfig.testFunc} /> // pass to child
    .....

Все непроверенные, но что идея...