面试题：React路由条件渲染下的数据传递与状态管理

Question

在React应用中，使用路由进行条件渲染，当从一个路由页面跳转到另一个根据条件渲染的路由页面时，需要传递一些用户相关数据，同时涉及到状态管理（如使用Redux或Mobx），请阐述如何设计合理的数据流，保证数据的正确传递和状态的一致性，并且举例说明关键代码。

Answer 1

1. 数据流设计思路

1. 路由传递数据：在React Router中，可以使用state属性在路由跳转时传递数据。例如，当从/page1跳转到/page2时，在/page1的跳转逻辑中设置要传递的数据。
2. 状态管理：
   • Redux：将用户相关数据存储在Redux的store中。在接收数据的组件中，通过mapStateToProps和mapDispatchToProps连接到store，以获取和更新数据。
   • Mobx：定义一个包含用户相关数据的可观察状态，组件通过观察这个状态来响应数据变化。

2. 关键代码示例 - Redux

路由跳转传递数据

import { useHistory } from'react-router-dom';

const Page1 = () => {
    const history = useHistory();
    const userData = { name: 'John', age: 30 };
    const handleClick = () => {
        history.push({
            pathname: '/page2',
            state: { userData }
        });
    };

    return (
        <div>
            <button onClick={handleClick}>跳转到Page2</button>
        </div>
    );
};

export default Page1;

Page2接收数据并处理（结合Redux）

import React from'react';
import { useLocation } from'react-router-dom';
import { useSelector, useDispatch } from'react-redux';
import { setUserData } from '../actions/userActions';

const Page2 = () => {
    const location = useLocation();
    const dispatch = useDispatch();
    const userData = useSelector(state => state.userData);

    React.useEffect(() => {
        if (location.state && location.state.userData) {
            dispatch(setUserData(location.state.userData));
        }
    }, [location, dispatch]);

    return (
        <div>
            <p>用户名: {userData.name}</p>
            <p>年龄: {userData.age}</p>
        </div>
    );
};

export default Page2;

Redux相关代码（actions和reducer）

// actions/userActions.js
export const setUserData = (data) => ({
    type: 'SET_USER_DATA',
    payload: data
});

// reducers/userReducer.js
const initialState = {
    userData: {}
};

const userReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'SET_USER_DATA':
            return {
               ...state,
                userData: action.payload
            };
        default:
            return state;
    }
};

export default userReducer;

// store.js
import { createStore } from'redux';
import userReducer from './reducers/userReducer';

const store = createStore(userReducer);

export default store;

3. 关键代码示例 - Mobx

路由跳转传递数据

import { useHistory } from'react-router-dom';

const Page1 = () => {
    const history = useHistory();
    const userData = { name: 'John', age: 30 };
    const handleClick = () => {
        history.push({
            pathname: '/page2',
            state: { userData }
        });
    };

    return (
        <div>
            <button onClick={handleClick}>跳转到Page2</button>
        </div>
    );
};

export default Page1;

Mobx状态管理

// stores/userStore.js
import { makeObservable, observable, action } from'mobx';

class UserStore {
    userData = {};

    constructor() {
        makeObservable(this, {
            userData: observable,
            setUserData: action
        });
    }

    setUserData = (data) => {
        this.userData = data;
    };
}

const userStore = new UserStore();
export default userStore;

Page2接收数据并处理（结合Mobx）

import React from'react';
import { useLocation } from'react-router-dom';
import { observer } from'mobx-react';
import userStore from '../stores/userStore';

const Page2 = observer(() => {
    const location = useLocation();

    React.useEffect(() => {
        if (location.state && location.state.userData) {
            userStore.setUserData(location.state.userData);
        }
    }, [location]);

    return (
        <div>
            <p>用户名: {userStore.userData.name}</p>
            <p>年龄: {userStore.userData.age}</p>
        </div>
    );
});

export default Page2;