Доступ к методам функционального компонента извне

Question

Допустим, я хочу контролировать состояние загрузки своего приложения, вызывая метод извне приложения, например:

setLoading(true)

Я реализовал функциональный компонент, для которого работает что-то вроде этого:

import React from 'react';

function App() {
  const [loading, setLoading] = React.useState(true);
  window.setLoading = (isLoading) => { setLoading(isLoading) };

  if (loading) return 'Loading...';

  return 'App content';
}

Однако я считаю, что отображение setLoading() к windowне лучший подход. Можно ли тогда поступить иначе?

Если бы у меня был компонент класса, он выглядел бы так:

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
    }
  }

  setLoading = (loading) => {
    this.setState({ loading });
  }

  render() {
    return(this.state.loading ? 'Loading...' : 'App content');
  }
}

Затем при рендеринге я бы использовал callback ref, чтобы сделать весь компонент доступным со всеми его методами.

<App ref={(app) => { window.app = app }} />

app.setLoading(true)

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

Поскольку ни один из подходов не является оптимальным, какой из них мне следует использовать? Может есть что-нибудь получше?

Answer 1

Я думаю, что раскрытие внешнего вида только необходимых функций более кратко, чем раскрытие всего компонента. Если вы все равно открываете внешний вид, наличие компонента React, открытого вне контекста React, не имеет большого смысла - вместо этого что-то вродеwindow.setAppLoading больше похоже на внешнюю функцию для управления состоянием приложения, которая, вероятно, вам и нужна.

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