Как я могу инициализировать экземпляр класса в компоненте функции без сохранения состояния в React?

Question

Используя шаблон с сохранением состояния, я обычно инициализирую своего рода вспомогательный класс в своем конструкторе и использую его методы в некоторых методах жизненного цикла компонентов, как показано ниже:

class StatefulComponent extends Component {
  constructor(props) {
    super(props);
    this.helper = new HelperClass();
  }

  componentDidMount() {
    this.helper.doSomething();
  }

}

Теперь я хотел преобразовать ту же логику вкомпонент функции без сохранения состояния, подобный этому:

const StatelessFunction = (props) => {
   this.helper = new HelperClass();

   useEffect(() => {
     this.helper.doSomething();
   }, []);

}

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

Я сталкивался с useRef , но не уверен, подходит ли это моему случаю.

Answer 1

Вы можете использовать useMemo для создания экземпляра HelperClass и useEffect для его вызова. Предоставление им обоих пустого массива зависимостей означает, что они будут вызываться только «при монтировании». Я включил mount в кавычках, потому что memo будет вызываться только при первом рендеринге, а эффект будет вызываться после завершения первого цикла рендеринга.

const StatelessFunction = props => {
  const helper = useMemo(() => new HelperClass(), []);
  useEffect(() => {
    helper.doSomething();
  }, [helper]);
  return (<JSX />);
};

Если единственное, что ты когда-либо сделаешь, это просто вызов doSomething иникогда не используйте экземпляр помощника снова, вы можете просто сделать это с помощью useEffect:

useEffect(() => {
  new HelperClass().doSomething();
}, []);

Если вы планируете использовать экземпляр помощника позже, вы можете использовать предыдущий пример с useMemo или useRef:

const helper = useRef();
useEffect(() => {
  helper.current = new HelperClass();
  //only called once after first render
  helper.current.doSomething();
}, []);
//you still have the helper instance as helper.current

Answer 2

Я бы пошел на useMemo решение, но вот как вы можете сделать это с useRef + useEffect, чтобы устранить некоторую путаницу:

const StatelessFunction = (props) => {
   const helper = useRef(); // ref is equivalent of instance prop

   useEffect(() => {
     helper.current = new HelperClass();
     helper.current.doSomething();
   }, []); // this is equivalent of componentDidMount
}

Answer 3

Вы правы, useRef позволяет вам сохранять один и тот же экземпляр HelperClass при повторном рендеринге

const StatelessFunction = (props) => {
   const helper = useRef(new HelperClass())

   useEffect(() => {
     helper.current.doSomething();
   }, []);
}