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

Question

我目前正在尝试将一些挂钩转换为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在应用程序首次安装时仅触发一次，我该如何实现呢？谢谢

Answer 1

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

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

例如：

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

您可以通过Google搜索“类组件生命周期” 来检查类组件中可用的生命周期方法。

但是，正如您可以在问题注释中看到的那样，Hooks可以为您提供的不仅仅是类组件，而且重新创建它们并非易事。从类组件移到Hooks更容易。