面试题：React生命周期在复杂状态管理业务中的应用优化

1. React 生命周期方法优化

shouldComponentUpdate：
- 作用：在组件接收到新的 props 或 state 时，决定是否重新渲染组件。通过比较新旧 props 和 state，可以避免不必要的重渲染。
- 示例代码：

class MyComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        // 比较当前 props 和 nextProps 以及 state 和 nextState
        if (this.props.value!== nextProps.value || this.state.count!== nextState.count) {
            return true;
        }
        return false;
    }
    render() {
        return <div>{this.props.value}</div>;
    }
}

componentDidUpdate：
- 作用：在组件更新后触发。用于处理需要在组件更新后执行的副作用操作，例如与 DOM 交互、网络请求等。但要注意避免在此方法中引发无限循环更新。
- 示例代码：

class MyComponent extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        if (prevProps.value!== this.props.value) {
            // 执行更新后的操作，如更新 DOM 元素的样式
            const element = document.getElementById('my - element');
            element.style.color = 'blue';
        }
    }
    render() {
        return <div id="my - element">{this.props.value}</div>;
    }
}

2. Redux 优化复杂状态管理

单一数据源：
- 作用：Redux 使用单一的 store 来存储整个应用的状态。这使得状态管理更加集中化，易于跟踪和调试。所有组件都从这个单一的 store 中获取数据，减少了组件之间直接传递状态的复杂性。
- 示例：

// 创建 store
import { createStore } from'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);

action 与 reducer：
- 作用：action 是描述状态变化的对象，reducer 是根据 action 来更新状态的纯函数。通过这种方式，状态变化变得可预测。例如，当一个组件需要更新状态时，它会 dispatch 一个 action，reducer 接收到 action 后更新 store 中的状态。
- 示例代码：

// action
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
export const incrementCounter = () => ({
    type: INCREMENT_COUNTER
});
// reducer
const initialState = {
    counter: 0
};
const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case INCREMENT_COUNTER:
            return {
               ...state,
                counter: state.counter + 1
            };
        default:
            return state;
    }
};

connect 方法（在 React - Redux 中）：
- 作用：用于连接 React 组件与 Redux store。通过 mapStateToProps 和 mapDispatchToProps 函数，可以精准地控制组件从 store 中获取哪些数据以及可以 dispatch 哪些 action。这样可以避免组件订阅不必要的状态更新，从而减少重渲染。
- 示例代码：

import React from'react';
import { connect } from'react - redux';
import { incrementCounter } from './actions';
const CounterComponent = ({ counter, incrementCounter }) => (
    <div>
        <p>Count: {counter}</p>
        <button onClick={incrementCounter}>Increment</button>
    </div>
);
const mapStateToProps = state => ({
    counter: state.counter
});
const mapDispatchToProps = {
    incrementCounter
};
export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

3. 整体优化策略与代码结构示例

组件拆分：将复杂的组件拆分成多个小的、功能单一的组件。每个小组件只负责处理自己的状态和业务逻辑，通过 props 从父组件或 Redux store 接收数据。这样可以降低组件的复杂度，提高代码的可维护性。
使用 Redux 的中间件：例如 redux - thunk 或 redux - saga 来处理异步操作。异步操作（如网络请求）可以在中间件中进行管理，避免在组件中直接处理异步逻辑，使得组件更加纯净和易于测试。
代码结构示例：

src/
├── actions/
│   ├── counterActions.js
│   └── otherActions.js
├── reducers/
│   ├── counterReducer.js
│   └── rootReducer.js
├── components/
│   ├── CounterComponent.js
│   └── OtherComponent.js
├── store/
│   └── configureStore.js
├── App.js
└── index.js

在这个结构中，actions 目录存放所有的 action 创建函数，reducers 目录存放 reducer 函数，components 目录存放 React 组件，store 目录用于配置 Redux store。App.js 作为应用的主要组件，通过 connect 方法连接 Redux store 和各个组件，实现状态管理和组件间的交互。index.js 用于渲染整个应用。

星途面试题库

面试题：React生命周期在复杂状态管理业务中的应用优化

知识考点

面试题答案

1. React 生命周期方法优化

2. Redux 优化复杂状态管理

3. 整体优化策略与代码结构示例