类组件的 useEffect 替代品

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

我想在我的基于类的组件中具有类似的功能localStorage。我怎样才能确保我的状态在发生任何变化时立即更新？localStorage?

我就是这样做的。

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使用基于类的组件进行更改。