Преобразование кода из функциональных перехватчиков React в компоненты класса - PullRequest
Новая
       6

Преобразование кода из функциональных перехватчиков React в компоненты класса

0 голосов
/ 20 февраля 2020

В настоящее время я пытаюсь преобразовать некоторые ловушки в компоненты класса в React. Я пытаюсь воссоздать код, который позволяет хранить сессии, чтобы приложению не нужно было так сильно извлекать данные из API. Вот код: 

useEffect(() => {
        if(sessionStorage.homeState){
            // console.log("Getting from session storage");
            setState(JSON.parse(sessionStorage.homeState));
            setLoading(false);
        }else{
            // console.log("Getting from API");
            fetchMovies(POPULAR_BASE_URL);
        }
    }, [])

    useEffect(() => {
        if(!searchTerm){
            // console.log("Writing to session storage");
            sessionStorage.setItem('homeState', JSON.stringify(state));
        }
    }, [searchTerm, state])

Это два хука useEffect, поэтому для меня имеет смысл go с обычным componentDidMount для получения из хранилища сеанса. Единственное, что я не могу понять, это как воссоздать второй useEffect, который устанавливает хранилище сессии и срабатывает только при изменении searchTerm или состояния. searchTerm и state - это просто два свойства состояния. Как я могу реализовать это, так как componentDidMount срабатывает только один раз при первом монтировании приложения? Спасибо

1 Ответ

1 голос
/ 20 февраля 2020

Единственное, что я не могу понять, это как воссоздать второй эффект useEffect, который устанавливает хранилище сессии и срабатывает только при изменении searchTerm или состояния. searchTerm и state - это просто два свойства состояния.

componentDidMount() - это только один из методов, используемых компонентами класса, вы можете воссоздать второй хук с помощью componentWillUpdate () или shouldComponentUpdate ().

Например: 

componentWillUpdate(nextProps, nextState) {
  if (this.props.searchTerm !== prevProps.searchTerm) {
    ...
  }
}

Вы можете проверить, какие методы жизненного цикла доступны в компонентах класса, по Googling "жизненный цикл компонента класса" .

Но, как вы можете прочесть в комментарии к вашим вопросам, крючки могут предложить Вы больше, чем компоненты класса, и воссоздать их нетривиально. Проще перейти от компонента класса к крючкам.

...