时间戳

首页 > 解决方案 > 类组件的 useEffect 替代品

reactjs - 类组件的 useEffect 替代品

问题描述

我刚刚了解到，在功能组件中，我可以使用它useEffect来监视任何副作用（例如：使用时localStorage），以确保我的状态与效果挂钩。

我希望在基于类的 Component 中具有类似的功能localStorage。我如何确保我的状态在发生任何更改后立即更新localStorage？

标签： reactjs

解决方案

我就是这样做的。

class Login extends Component {
    constructor(props) {
        super(props);

        this.state = {
            // Get value from localStorage or use default
            isLoggedIn: localStorage.getItem('isLoggedIn') || 0
        }

        // Listen to storage event
        window.addEventListener('storage', (e) => this.storageChanged(e));

        // Bind this to storageChanged()
        this.storageChanged = this.storageChanged.bind(this);
    }

    storageChanged(e) {
        if(e.key === 'isLoggedIn') {
            this.setState({isLoggedIn: e.newValue})
        }
    }

    render() {
        return <p>{this.state.isLoggedIn}</p>
    }
}

这就是我可以localStorage使用基于类的组件进行更改的方式。

推荐阅读