Как вызвать ререндер несвязанного компонента?

В React компоненты перерисовываются (или ререндерятся) автоматически, когда происходит изменение их состояния или свойств. Однако, если вы хотите вызвать ререндер несвязанного компонента, т.е. компонента, который не получает обновления своих свойств или состояния из родительского компонента, вам необходимо использовать различные подходы, в зависимости от версии React.

В React версии 16.3 и выше вы можете использовать Refs и метод forceUpdate() для принудительного вызова ререндера несвязанного компонента. Refs предоставляют возможность получения ссылок на экземпляры компонентов и методы экземпляра, которые можно вызывать. Для использования Refs, вы должны создать Ref в родительском компоненте и сохранить ссылку на несвязанный компонент. Затем, когда вам понадобится вызвать перерисовку несвязанного компонента, вы можете вызвать метод forceUpdate() на этой ссылке. Например:

import React, { Component } from 'react';

class ParentComponent extends Component {
  constructor() {
    super();
    this.unrelatedComponentRef = React.createRef();
  }

  handleButtonClick = () => {
    this.unrelatedComponentRef.current.forceUpdate();
  };

  render() {
    return (
      <div>
        <button onClick={this.handleButtonClick}>
          Перерисовать несвязанный компонент
        </button>
        <UnrelatedComponent ref={this.unrelatedComponentRef} />
      </div>
    );
  }
}

class UnrelatedComponent extends Component {
  // ...
}

В старых версиях React, до 16.3, вы можете передавать флаг key в компонент, который вы хотите принудительно перерисовать. Когда значение ключа изменяется, React обрабатывает компонент как новый и ререндерит его полностью. Например:

import React, { Component } from 'react';

class ParentComponent extends Component {
  constructor() {
    super();
    this.state = {
      unrelatedComponentKey: 1
    };
  }

  handleButtonClick = () => {
    this.setState(prevState => ({
      unrelatedComponentKey: prevState.unrelatedComponentKey + 1
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleButtonClick}>
          Перерисовать несвязанный компонент
        </button>
        <UnrelatedComponent key={this.unrelatedComponentKey} />
      </div>
    );
  }
}

class UnrelatedComponent extends Component {
  // ...
}

Оба метода forceUpdate() и использование ключа могут быть использованы для вызова ререндера несвязанного компонента. Однако, учтите, что использование метода forceUpdate() является менее предпочтительным и нарушает принцип однонаправленного потока данных в React. Поэтому рекомендуется использовать ключи, если это возможно.