Блог

Я пытаюсь немного узнать о Firebase, а также создать свои собственные HOC. С этой целью я попытался создать HOC withAuth , который создает новый prop uid . Это делается для того, чтобы я всегда мог переносить ссылку на пользователя через компоненты моего приложения.

HOC работает нормально, и я могу успешно передавать другим компонентам его новое значение prop, но у меня возникли небольшие проблемы с пониманием побочного эффекта.

Для тех компонентов, которые оборачиваются моей проверкой подлинности HOC, при первом рендеринге, если я пытаюсь наблюдать uid с помощью простого console.log , это всегда null происходит при первом рендеринге (за которым следует заполненное значение).

Мне интересно, является ли это нормальным поведением с учетом жизненного цикла? И если да, есть ли способ, которым я могу бороться с этим.

 import React from 'react';
import auth from '@react-native-firebase/auth';


export default withAuth = (WrappedComponent) => {
  class withAuth extends React.Component {

  state = {
    uid: null 
  }

  componentWillMount() {
    auth().signInAnonymously()
    auth().onAuthStateChanged(user => 
      this.setState({uid: user.uid})
    ) 
  }

  render(){      
    const newProps = { 
      uid: this.state.uid,  
      ...this.props 
    }; 
    return (
      <WrappedComponent {...newProps}/>
    )
  }
}
return withAuth; 
 

}

В вашем примере вы используете компонент класса и начинаете с null явной установки состояния, поэтому вы видите null значение.

Я бы рекомендовал отказаться от компонента класса HOC, поскольку это более старая практика. Рекомендуемой стратегией здесь было бы использование перехватов и контекста.

Не волнуйтесь, если вы не очень знакомы с этими понятиями. Поскольку они являются рекомендуемой стратегией, вы найдете много материалов для чтения и руководств о том, как настроить Firebase с помощью React hooks и контекста. Вот 2 отличные статьи, которые помогут вам начать:

• Интеграция аутентификации Firebase, перехватов и контекста в ваше приложение ReactJS
• Использование Firebase с реактивными перехватами

Я также рекомендую прочитать введение к перехватам в официальных документах React.