在 React 中使用 window.location.reload 是否正确？
当您打开reactjs.org 时，在“Declarative”标题下，有一句话：当您的数据发生变化时，React 将有效地更新和呈现正确的组件。
对于我的几个应用程序，我使用以下结构：App | AppContainer（所有应用逻辑，登录前保护）| 登录（登录表单）
如果您render根据用户的凭据在 App's 中返回 2 个不同的组件，则此结构很有效。
render(){
if(isUserLoggedIn()){
return <AppContainer />;
}
return <Login />;
}
在Login组件内部，我正在刷新页面，window.location.reload以便render触发应用程序，然后我将获取AppContainer组件。
但是感觉有点像jQuery + Angular。是否有更好的（更多 React）方式来触发渲染功能，或者这应该是怎样的？
守候你守候我浏览 408回答 2
2回答
-
宝慕林4294392
有没有更好（更多反应）的方式来触发渲染功能......通常的方法是拥有状态，在这种情况下，至少是用户是否登录的布尔值，并在用户成功登录或注销时更新该状态。更新状态会触发渲染。就您而言，由于您使用的是 Redux，因此您的状态可能会在那里。我不使用 Redux（还没有？），这大概是没有的样子，粗略地（如果您使用的是类组件，就像您看起来的那样）：class App extends Component { constructor(props) { super(props); this.state = { loggedIn: /*...initial value, perhaps from web storage or cookie...*/; }; this.onLogin = this.onLogin.bind(this); this.onLogout = this.onLogout.bind(this); } onLogin() { // ...probably stuff here, then: this.setState({loggedIn: true}); } onLogout() { // ...probably stuff here, then: this.setState({loggedIn: false}); } render() { if (this.state.logedIn) { return <AppComponent onLogout={this.onLogout}/>; } return <Login onLogin={this.onLogin}/>; }}或带钩子：const App = () => { const [loggedIn, setLoggedIn] = useState(/*...initial value, perhaps from web storage or cookie...*/); const onLogin = useCallback(() => { // ...probably stuff here, then: setLoggedIn(true); }, [loggedIn]); const onLogout = useCallback(() => { // ...probably stuff here, then: setLoggedIn(false); }, [loggedIn]); if (this.state.logedIn) { return <AppComponent onLogout={onLogout}/>; } return <Login onLogin={onLogin}/>;}（再次，粗略） -
郎朗坤
如果您需要更新组件状态，那么您可以传递一个 observable 并监听更改或使用一些状态管理库。这是一种可能的解决方案：创建可观察的类declare type IObserverHandler = (event: any) => void;export class Observable { private observers: IObserverHandler[] = []; public subscribe(observer: IObserverHandler) { if (!this.observers.includes(observer)) { this.observers.push(observer); } } public unsubscribe(observer: IObserverHandler) { this.observers = this.observers.filter(o => o !== observer); } public publish(event: any) { for (const observer of this.observers) { observer(event); } }}创建 Login 类，该类将发布有关登录或注销等操作的事件class Login extends Observable { public login() { this.publish({ value: true }); } public logout() { this.publish({ value: false }); }}在组件中订阅观察者并使用事件值更新组件状态export abstract class Component extends React.Component<any, any> { private observer: IObserverHandler; private observable: Login; constructor(props: any) { super(props); this.observable = this.props.observable; this.state = { isAuthenticated: false } this.observer = (event) => { this.setState({ isAuthenticated: event.value }) } this.observable.subscribe(this.observer); } componentWillUnmount() { this.observable.unsubscribe(this.observer); }}
随时随地看视频慕课网APP
相关分类
JavaScript