将代码从功能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挂钩，所以对我来说，使用常规组件DidMount从会话存储中获取是有意义的。我似乎唯一弄不明白的是如何重新创建第二个useEffect，它设置会话存储，并仅在searchTerm或状态更改时激发。searchTerm和state只是state的两个属性。既然componentDidMount在应用程序首次装载时只触发一次，我该如何实现这一点？感谢

Answer 1

我唯一想不出的是如何重新创建第二个useEffect，它设置会话存储，并仅在searchTerm或状态更改时激发。searchTerm和state只是state的两个属性。

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

例如：

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

您可以通过谷歌搜索"类组件生命周期">来检查类组件中可用的生命周期方法。

但是，正如您在对问题的评论中所读到的，Hooks可以为您提供的不仅仅是类组件，而且重新创建它们并非易事。从类组件移动到Hooks更容易。