面试题：React-Redux性能优化及异常处理

使用shouldComponentUpdate或React.memo结合Redux特性优化性能

shouldComponentUpdate
- 在类组件中，通过重写shouldComponentUpdate(nextProps, nextState)方法，可以手动控制组件是否更新。当使用Redux时，props中会包含从Redux store中获取的数据。
- 例如，如果组件只依赖于props中的某个特定数据字段，我们可以这样实现：

class MyComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return this.props.specificDataField!== nextProps.specificDataField;
    }
    render() {
        // 组件渲染逻辑
    }
}

- 这样，只有当`specificDataField`发生变化时，组件才会重新渲染，避免了因其他无关数据变化导致的不必要渲染。

2. React.memo - 对于函数组件，React.memo是一个高阶组件，它会对组件的props进行浅比较。如果props没有变化，组件将不会重新渲染。 - 示例：

const MyComponent = React.memo((props) => {
    // 组件渲染逻辑
});

- 当与Redux结合时，如果能确保传递给组件的`props`中的Redux数据是稳定引用（例如通过使用`reselect`库来创建高效的selector），`React.memo`就能有效阻止不必要的渲染。
- 若`props`中包含对象或数组，浅比较可能不够，此时可以传递一个自定义比较函数给`React.memo`：

const MyComponent = React.memo((props) => {
    // 组件渲染逻辑
}, (prevProps, nextProps) => {
    // 自定义比较逻辑，例如比较对象中的特定字段
    return prevProps.someObject.someField === nextProps.someObject.someField;
});

处理Redux异步action中的网络异常并反馈给用户

使用Redux - Thunk中间件
- 假设使用Redux - Thunk来处理异步action。在异步action函数中，可以使用try - catch块来捕获网络异常。
- 示例：

import { FETCH_DATA_SUCCESS, FETCH_DATA_FAILURE } from './actionTypes';
import api from '../api';

export const fetchData = () => {
    return async (dispatch) => {
        try {
            const response = await api.getData();
            dispatch({ type: FETCH_DATA_SUCCESS, payload: response.data });
        } catch (error) {
            dispatch({ type: FETCH_DATA_FAILURE, payload: error.message });
        }
    };
};

在组件中处理异常
- 在连接到Redux store的组件中，可以根据action的类型来显示相应的错误信息。
- 例如，在类组件中：

import React from'react';
import { connect } from'react-redux';
import { fetchData } from './actions';

class MyComponent extends React.Component {
    componentDidMount() {
        this.props.fetchData();
    }
    render() {
        const { error } = this.props;
        return (
            <div>
                {error && <p>{error}</p>}
                {/* 其他组件内容 */}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        error: state.error
    };
};

export default connect(mapStateToProps, { fetchData })(MyComponent);

- 在函数组件中：

import React from'react';
import { useDispatch, useSelector } from'react-redux';
import { fetchData } from './actions';

const MyComponent = () => {
    const dispatch = useDispatch();
    const error = useSelector(state => state.error);

    React.useEffect(() => {
        dispatch(fetchData());
    }, [dispatch]);

    return (
        <div>
            {error && <p>{error}</p>}
            {/* 其他组件内容 */}
        </div>
    );
};

export default MyComponent;

用户体验优化
- 可以显示加载指示器，在发起异步请求时展示，直到请求完成或失败。
- 对于频繁出现的网络异常，可以提供重试按钮，在FETCH_DATA_FAILURE action处理时，允许用户再次触发fetchData action。

星途面试题库

面试题：React-Redux性能优化及异常处理

知识考点

面试题答案

使用shouldComponentUpdate或React.memo结合Redux特性优化性能

处理Redux异步action中的网络异常并反馈给用户