首頁猿問在 React 中使用...

在 React 中使用 window.location.reload 是否正確？

JavaScript

守候你守候我 2021-12-12 17:46:48

當您打開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）方式來觸發渲染功能，或者這應該是怎樣的？

查看完整描述

2 回答

寶慕林4294392

TA貢獻2021條經驗獲得超8個贊

有沒有更好（更多反應）的方式來觸發渲染功能......

通常的方法是擁有狀態，在這種情況下，至少是用戶是否登錄的布爾值，并在用戶成功登錄或注銷時更新該狀態。更新狀態會觸發渲染。

就您而言，由于您使用的是 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}/>;

}

（再次，粗略）

反對回復 2021-12-12

郎朗坤

TA貢獻1921條經驗獲得超9個贊

如果您需要更新組件狀態，那么您可以傳遞一個 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);

}

反對回復 2021-12-12

2 回答
0 關注
405 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 React 中使用 window.location.reload 是否正確？

在 React 中使用 window.location.reload 是否正確？

2 回答

添加回答

在 React 中使用 window.location.reload 是否正確？