Как обрабатывать инициализацию и события из внешней библиотеки?

Question

Я импортирую внешнюю библиотеку (из cdn; я знаю, что это ужасно), которую нужно инициализировать с помощью какого-то конфига и генерировать какие-то события.

Parent:

eventTrigerred = e => console.log(e)
...

<Component
   onEvent= {this.eventTrigerred}
/>

Child:

render() {
   const initiliseLibrary = () => {
       let config = {
           key: "XXX", // some key to initilise the library
           onLibraryEvent: this.props.onEvent  // the event I want to handle
       }  
       window.StrangeLibrary.init(config)
   } 

   return (
     <div id="library-area">
         {initialiseFrames()} // when initilised this library will render an elemnt here
     </div>
   );
}

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

Мне кажется, что я что-то делаю в корне неправильно, и мне хотелось бы, чтобы мне не пришлось использовать эту библиотеку, но я должен это сделать.

Есть идеи, в чем может быть проблема?

Answer 1

Функция рендеринга не должна создавать никаких побочных эффектов. Вместо этого поместите ваш код инициализации в componentDidMount, например, так:

componentDidMount() {
   let config = {
       key: "XXX", // some key to initilise the library
       onLibraryEvent: this.props.onEvent  // the event I want to handle
   }  
   window.StrangeLibrary.init(config)
}

Однако этот код будет вызываться снова, если компонент будет перемонтирован (но не если он будет визуализирован снова без перемонтажа из пропаизменение или изменение состояния).

Если он все еще находится в цикле, вы можете поднять код инициализации в componentDidMount родительского компонента, который остается подключенным все время.