Как в React.js обновить компонент из вне? Или как связать React компоненты и Angular директивы?

Question

[Вячеслав Саратовский]

Писал приложение на Angular 1.x Приложение большое и вскоре стали заметны тормоза, оптимизация частично улучшила ситуацию, но не достаточно. Хочу самые тяжелые штуки перевести на React, полностью переписывать приложение на React не хочется (слишком большое)
Как при обновление scope перерендерить (из Angular директивы) React-компонент?

Код Angular директивы:

class IstManagerListRowDirectiveClass extends IstDirectiveClass {
        constructor() {
            this.restrict = "E";
            this.scope = false;
            this.uid = null;
            super.constructor();
        } 
        unboundLink(scope, element, attr) {
            /*this.watchCollection - обертка над scope.$watchCollection()*/
            this.watchCollection("uid", (newUid, oldUid) => {
                if(angular.isNumber(newUid) || angular.isString(newUid)){
                    this.uid = newUid;
                    const ReactElement = (<IstManagerListRowComponent managerUid = {this.uid}></IstManagerListRowComponent>);
                    ReactDOM.render(ReactElement, element[0]);
                } else {
                    console.error("Класс: '"+this.constructor.name+"'; uid должен быть строкой или числом");
                }  
            }); 
        } 
        static createInstance() { 
            IstManagerListRowDirectiveClass.instance = new IstManagerListRowDirectiveClass();
            return IstManagerListRowDirectiveClass.instance;
        }
    };
    app.directive("istManagerListRow", IstManagerListRowDirectiveClass.createInstance);

Код React компонента:

class IstManagerListRowComponent extends React.Component{
        constructor(data){
            super.constructor(data);
            this.state = {
                managerUid: this.props.managerUid
            };
        }
        render() {
            return (<div className="table-row">this.state.managerUid </div>);
        }
}

Answer 1

[Сергей Протько]

this.watchCollection

Может вам не нужен раект? Может вам надо переосмыслить то, как вы делаете дела на ангуляре? Например заюзайте имутабельные структурки, и все сразу станет намного быстрее.

Код React компонента:

А вот код ангуляр компонента:

class IstManagerListRowComponent {
    
}
export default {
    controller: IstManagerListRowComponent,
    bindings: {
         'uid': '='
    },
    template: `
        <div className="table-row">$ctrl.uid </div>
    `
}

а вместо ватчеров:

class IstManagerListRowComponent {
    set uid(value) {
       this._uid = value;
       // do something
    }
}

Я сильно сомневаюсь что такое использование реакта вам хоть чем-то поможет. Если бы вы не внутри отдельных директив это делали, на например... сделали бы все компоненты на реакте. а состояние, роутинг и т.д. разруливали ангуляром - тогда да, профит был бы. А так - никакого профита, просто помимо накладных расходов на дерти чекинг ангуляра у вас добавляется накладные расходы на дерти чекинг реакта (между vDom и dom).