面试题：React组件通信与生命周期：复杂场景下的通信优化与生命周期管理

设计思路

状态管理：对于多个兄弟组件间共享状态，使用Redux或React Context来管理。Redux适合大型复杂应用，有清晰的数据流，便于调试；React Context适合轻量级状态共享。考虑到大型React应用，选择Redux更合适。
生命周期管理：在各个组件的生命周期钩子（如componentDidMount、componentDidUpdate、componentWillUnmount）中，根据共享状态的变化来执行相应业务逻辑。利用Redux的订阅机制，当状态变化时，相关组件重新渲染，在componentDidUpdate中进行副作用操作。

使用技术

Redux：用于状态管理，集中存储共享状态，通过action和reducer来更新状态，实现单向数据流。
React生命周期钩子：在组件的不同生命周期阶段执行特定逻辑。

核心代码实现

Redux部分
- 安装Redux和React - Redux：

npm install redux react-redux

- **创建store**：

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

// 定义reducer
const initialState = {
    sharedData: null
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'UPDATE_SHARED_DATA':
            return {
               ...state,
                sharedData: action.payload
            };
        default:
            return state;
    }
};

// 创建store
const store = createStore(reducer);

export default store;

- **连接组件到Redux**：

// ComponentA.js
import React from'react';
import { connect } from'react-redux';

const ComponentA = ({ sharedData, updateSharedData }) => {
    const handleChange = (newData) => {
        updateSharedData(newData);
    };

    return (
        <div>
            {/* 组件A的UI和事件处理 */}
        </div>
    );
};

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

const mapDispatchToProps = (dispatch) => ({
    updateSharedData: (data) => dispatch({ type: 'UPDATE_SHARED_DATA', payload: data })
});

export default connect(mapStateToProps, mapDispatchToProps)(ComponentA);

// ComponentB.js
import React, { Component } from'react';
import { connect } from'react-redux';

class ComponentB extends Component {
    componentDidUpdate(prevProps) {
        if (prevProps.sharedData!== this.props.sharedData) {
            // 重新计算数据
            const newCalculatedData = this.calculateData(this.props.sharedData);
            // 执行副作用操作
            console.log('ComponentB副作用操作:', newCalculatedData);
        }
    }

    calculateData(data) {
        // 具体计算逻辑
        return data * 2;
    }

    render() {
        return (
            <div>
                {/* 组件B的UI */}
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(ComponentB);

// ComponentC.js
import React, { Component } from'react';
import { connect } from'react-redux';

class ComponentC extends Component {
    componentDidUpdate(prevProps) {
        if (prevProps.sharedData!== this.props.sharedData) {
            // 重新计算数据
            const newCalculatedData = this.calculateData(this.props.sharedData);
            // 执行副作用操作
            console.log('ComponentC副作用操作:', newCalculatedData);
        }
    }

    calculateData(data) {
        // 具体计算逻辑
        return data + 10;
    }

    render() {
        return (
            <div>
                {/* 组件C的UI */}
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(ComponentC);

React部分
- 应用入口：

// index.js
import React from'react';
import ReactDOM from'react-dom';
import { Provider } from'react-redux';
import store from './store';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
import ComponentC from './ComponentC';

const App = () => (
    <Provider store = {store}>
        <div>
            <ComponentA />
            <ComponentB />
            <ComponentC />
        </div>
    </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));

面试题：React组件通信与生命周期：复杂场景下的通信优化与生命周期管理

知识考点

面试题答案

设计思路

使用技术

核心代码实现