将代码从功能性的React钩子转换为类组件

问题描述 投票:0回答:1

我目前正在尝试将一些挂钩转换为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挂钩,因此对我来说,使用常规的componentDidMount从会话存储中获取是有意义的。我似乎无法弄清的唯一一件事是如何重新创建第二个useEffect,后者设置会话存储并仅在searchTerm或状态更改时才触发。 searchTerm和state只是状态的两个属性。由于componentDidMount在应用程序首次安装时仅触发一次,我该如何实现呢?谢谢

javascript reactjs api react-hooks
1个回答
0
投票

我似乎无法弄清的唯一问题是如何重新创建第二个useEffect,该useEffect设置会话存储并仅在searchTerm或状态更改时才触发。 searchTerm和state只是状态的两个属性。

componentDidMount()只是类组件使用的方法之一,您可以使用componentWillUpdate()或shouldComponentUpdate()重新创建第二个钩子。

例如:

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

您可以通过Googling “”类组件生命周期“]检查类组件中可用的生命周期方法。

© www.soinside.com 2019 - 2024. All rights reserved.