面试题：React 中 Redux 结合 State 优化复杂应用性能的策略与实践

1. 避免不必要的重新渲染

使用 react-redux 的 connect 高阶组件优化：
- connect 高阶组件通过 mapStateToProps 函数来确定组件订阅哪些状态部分。精确地映射组件需要的状态，可以避免因无关状态变化导致的重新渲染。
- 示例：

import React from'react';
import { connect } from'react-redux';

// 子组件，只关心 count 状态
const CounterComponent = ({ count }) => (
  <div>
    <p>Count: {count}</p>
  </div>
);

// 只映射 count 状态
const mapStateToProps = state => ({
  count: state.counter.count
});

export default connect(mapStateToProps)(CounterComponent);

使用 shouldComponentUpdate 或 React.memo：
- 对于类组件，可以通过重写 shouldComponentUpdate 方法，手动比较前后 props 和 state 来决定是否更新。
- 对于函数组件，React.memo 可以实现类似功能，它会浅比较 props，如果 props 没有变化，组件不会重新渲染。
- 示例（函数组件使用 React.memo）：

import React from'react';

const MyComponent = React.memo((props) => {
  return <div>{props.value}</div>;
});

export default MyComponent;

2. 在异步操作场景下优化 State 更新性能

使用 redux-thunk 或 redux-saga：
- redux-thunk：它允许 action creator 返回一个函数而不是一个普通的 action 对象。在这个函数中，可以进行异步操作，并且根据异步操作的结果再 dispatch 相应的 action。
- 示例：

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

const MyAsyncComponent = () => {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

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

  return (
    <div>
      {data && <p>{data.message}</p>}
    </div>
  );
};

export default MyAsyncComponent;

// actions.js
import axios from 'axios';

export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';

export const fetchData = () => {
  return async (dispatch) => {
    try {
      const response = await axios.get('/api/data');
      dispatch({ type: FETCH_DATA_SUCCESS, payload: response.data });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };
};

redux-saga：使用 generator 函数来管理异步操作，它提供了更强大的异步流程控制，比如并发请求、错误处理等。
示例：

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

const MyAsyncComponent = () => {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

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

  return (
    <div>
      {data && <p>{data.message}</p>}
    </div>
  );
};

export default MyAsyncComponent;

// sagas.js
import { call, put, takeEvery } from'redux-saga/effects';
import axios from 'axios';
import { FETCH_DATA_SUCCESS } from './actions';

function* fetchDataSaga() {
  try {
    const response = yield call(axios.get, '/api/data');
    yield put({ type: FETCH_DATA_SUCCESS, payload: response.data });
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

export function* rootSaga() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga);
}

// store.js
import { createStore, applyMiddleware } from'redux';
import createSagaMiddleware from'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

export default store;

3. 深度性能优化策略总结

Immutable Data：使用 Immutable.js 库或对象展开运算符等方式，确保每次 state 更新都创建新的对象，避免直接修改原对象。这有助于 shouldComponentUpdate 或 React.memo 进行准确的比较。
Middleware Chaining：合理使用 Redux middleware 链，在不同的 middleware 中处理不同的逻辑，比如日志记录、错误处理等，使异步操作和状态更新流程更清晰，也有助于性能优化。
Selector Functions：使用 Reselect 库创建可记忆的 selector 函数。这些函数会缓存计算结果，只有当它依赖的 state 部分发生变化时才会重新计算，避免不必要的重复计算，提高性能。例如：

import { createSelector } from'reselect';

const getCart = state => state.cart;

const getTotalPrice = createSelector(
  [getCart],
  cart => cart.reduce((total, item) => total + item.price * item.quantity, 0)
);

星途面试题库

面试题：React 中 Redux 结合 State 优化复杂应用性能的策略与实践

知识考点

面试题答案

1. 避免不必要的重新渲染

2. 在异步操作场景下优化 State 更新性能

3. 深度性能优化策略总结