Связь между компонентами Reactjs

После слишком многого с Redux, флюсом и другими методами pub/sub я закончил со следующей техникой. Я не знаю, может ли это нанести большой урон или недостатки, поэтому отправляйте его здесь, чтобы получить легкий опыт от опытных программистов о его плюсах и минусах.

var thisManager = function(){

    var _Manager = [];
    return{
        getThis : function(key){
            return  _Manager[key];
        },
        setThis : function(obj){            
            _Manager[obj.key] = obj.value;
        }
    }
};
var _thisManager = new thisManager();

// React Component
class Header extends Component{
   constructor(){
      super();
      _thisManager.setThis({ key: "Header", value:this}
   }
    someFunction(data){
        // call this.setState here with new data. 
   }
   render(){
      return <div />
   }
}

// Then from any other component living far somewhere you can pass the data to the render function and it works out of the box. 
i.e. 

class Footer extends Component{
  _click(e){
     let Header = _thisManager.getThis('Header');
     Header.somefunction(" Wow some new data from footer event ");
  }
 render(){
      return(
      <div>
          <button onClick={this._click.bind(this)}> send data to header and call its render </button>
      </div>


      );
  }
}

Я отправляю json в качестве данных в своем приложении, и он отлично отображает нужные компоненты, и я могу вызывать рендеринг без каких-либо пабов/суб или глубоких пропусков реквизита для вызова родительского метода с изменением this.setState, чтобы вызвать повторная визуализация.

Пока приложение работает отлично, и я также очень люблю его простоту. Просьба пролить свет на эту технику за и против

Привет

EDIT:

Плохо вызвать render, поэтому я изменил его на другой метод, чтобы получить больше плюсов и минусов этой настройки.

Ответы

Ответ 1

Две основные проблемы с этой настройкой:
  1. Вы никогда не должны обращаться к методам жизненного цикла реакции напрямую
  2. Бэкворы в компоненты - плохая идея, которая разрушает работоспособность реагирования

Объявление 1: Если вы вызываете render() (или любой другой метод реагирования) напрямую, ответ, вероятно, не вызывает componentDidMount(), componentDidUpdate() `и другие методы жизненного цикла в дереве компонентов.

Опасности:

  • Многие проекты с реагирующим компонентом в значительной степени зависят от методов жизненного цикла: getInitialState(), componentWillReceiveProps(), shouldComponentUpdate(), componentDidMount() и т.д. и т.д. Если вы вызываете render() напрямую, многие компоненты, скорее всего, сломаются или показать странное поведение.
  • Вы рискуете взломать механизм разностных разностей: через управление жизненным циклом, реакция хранит виртуальную копию DOM в ее (внутренней) памяти. Чтобы правильно работать, целостность этой копии, если она необходима, чтобы реагировать на работу.

Лучше было бы (но все же в нарушение моей второй точки):

  • Включите другой метод внутри компонента.
  • Что имеет setState(), если вы хотите повторно выполнить рендеринг.
  • И вызовите этот метод извне.

Объявление 2. Прямая ссылка на смонтированный компонент (как ваш thisManager делает) имеет некоторые дополнительные риски. Реагирование конструкций и ограничений существует по одной причине: поддерживать однонаправленный поток и иерархию компонентов с помощью реквизита и состояния, чтобы упростить обслуживание.

Если вы нарушите этот шаблон - построив бэкдор в компонент, который позволяет манипулировать состоянием - вы нарушаете этот конструктивный принцип реакции. Это быстрый ярлык, но он может вызвать сильную боль и раздражение, когда ваше приложение растет.

Насколько я знаю, единственными допустимыми исключениями для этого правила являются:

  • Методы внутри компонента, отвечающего на результаты вызова ajax, для обновления состояния (например, после извлечения данных с сервера)
  • Методы внутри компонента для обработки триггеров из его дочерних дочерних компонентов (например, проверка выполнения в форме после нажатия дочерней кнопки)

Итак, если вы хотите использовать его для этой цели, тогда вам все будет в порядке. Слово предупреждения: стандартный подход реагирования защищает произвольный доступ к компонентам, поскольку вызывающий компонент или метод должен иметь ссылку на компонент. В обоих примерах такая ссылка доступна.
В вашей настройке ЛЮБОЙ внешний фрагмент кода мог найти ref в "заголовке" в вашей таблице и вызвать метод, который обновляет состояние. С такой косвенной ссылкой и никоим образом не указывая, какой источник на самом деле называется вашим компонентом, ваш код, вероятно, станет намного сложнее отлаживать/поддерживать.