第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

守候你守候我 2021-12-12 17:46:48
當(dāng)您打開reactjs.org 時，在“Declarative”標(biāo)題下，有一句話：當(dāng)您的數(shù)據(jù)發(fā)生變化時，React 將有效地更新和呈現(xiàn)正確的組件。對于我的幾個應(yīng)用程序，我使用以下結(jié)構(gòu)：App | AppContainer（所有應(yīng)用邏輯，登錄前保護）| 登錄（登錄表單）如果您render根據(jù)用戶的憑據(jù)在 App's 中返回 2 個不同的組件，則此結(jié)構(gòu)很有效。render(){   if(isUserLoggedIn()){       return <AppContainer />;   }   return <Login />;}在Login組件內(nèi)部，我正在刷新頁面，window.location.reload以便render觸發(fā)應(yīng)用程序，然后我將獲取AppContainer組件。但是感覺有點像jQuery + Angular。是否有更好的（更多 React）方式來觸發(fā)渲染功能，或者這應(yīng)該是怎樣的？
查看完整描述

2 回答

?
寶慕林4294392

TA貢獻(xiàn)2021條經(jīng)驗 獲得超8個贊

有沒有更好（更多反應(yīng)）的方式來觸發(fā)渲染功能......


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


就您而言，由于您使用的是 Redux，因此您的狀態(tài)可能會在那里。


我不使用 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}/>;

}

（再次，粗略）


查看完整回答
反對 回復(fù) 2021-12-12
?
郎朗坤

TA貢獻(xiàn)1921條經(jīng)驗 獲得超9個贊

如果您需要更新組件狀態(tài)，那么您可以傳遞一個 observable 并監(jiān)聽更改或使用一些狀態(tài)管理庫。


這是一種可能的解決方案：


創(chuàng)建可觀察的類

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);

        }

    }

}

創(chuàng)建 Login 類，該類將發(fā)布有關(guān)登錄或注銷等操作的事件

class Login extends Observable {


    public login() {

        this.publish({ value: true });

    }


    public logout() {

        this.publish({ value: false });

    }

}

在組件中訂閱觀察者并使用事件值更新組件狀態(tài)

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);

    }

}


查看完整回答
反對 回復(fù) 2021-12-12
  • 2 回答
  • 0 關(guān)注
  • 387 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號