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

【问题标题】：Converting code from functional React hooks to class components将代码从功能性 React 钩子转换为类组件
【发布时间】：2020-06-04 04:18:26
【问题描述】：

我目前正在尝试将一些挂钩转换为 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 只是 state 的两个属性。由于 componentDidMount 仅在应用程序首次安装时触发一次，我该如何实现？谢谢

【问题讨论】：

这是您项目的要求吗？带有钩子的函数式组件是对类组件的改进，那么您倒退的原因是什么？
是的，我知道。我正在以这种方式工作，以更好地熟悉使用类和钩子组件的方式。一旦我的项目使用类组件完成，我稍后将转换回钩子。

标签： javascript reactjs api react-hooks

【解决方案1】：

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

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

例如：

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

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

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

【讨论】：