我正在看一下 react context api,我决定尝试将其设置为处理登录弹出窗口:
import React, { Component } from 'react';
export const LoginContext = React.createContext();
import firebase from 'firebase';
export class LoginProvider extends Component {
state = {
loginOpen: false,
user: Object
}
render() {
return <LoginContext.Provider value={{
state: this.state,
showLogin: () => this.setState({
loginOpen: true
}),
closeLogin: () => this.setState({
loginOpen: false
}),
login: async (username, password) => {
var auth = firebase.auth();
try {
var that = this;
auth.signInWithEmailAndPassword(username, password).then((user)=>{
that.setState({user: user, loginOpen: false});
});
}
catch (E) {
return E;
}
}
}}>
{this.props.children}
</LoginContext.Provider>;
}
}
在调用相关函数的 React 组件中使用。
我突然想到 LoginProvider 是一个视图模型。
这让我想知道:我是否正确使用了上下文功能?这是它的预期用途吗?
如果是这样,为什么用法如此陈旧?它提供什么好处?我的意思是它的代码比通过 redux 或 sagas 少,但仍然不必要地繁琐。