类组件的 useEffect 替代

Question

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

我想在我的基于类的组件中具有类似的功能localStorage。我怎样才能确保我的状态在localStorage.

Answer 1

我就是这样做的。

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使用基于类的组件来挂钩更改。