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

Question

当您打开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）方式来触发渲染功能，或者这应该是怎样的？

Answer 1

有没有更好（更多反应）的方式来触发渲染功能......

通常的方法是拥有状态，在这种情况下，至少是用户是否登录的布尔值，并在用户成功登录或注销时更新该状态。更新状态会触发渲染。

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

}

（再次，粗略）

Answer 2

如果您需要更新组件状态，那么您可以传递一个 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);

    }

}