面试题：Vue父子组件通信在复杂业务场景下的优化与拓展

优化方式

减少不必要的渲染：
- 使用 shouldComponentUpdate（类组件）或 React.memo（函数组件）来控制组件的渲染。当父组件传递的 props 没有变化时，阻止子组件不必要的重新渲染。
- 例如，对于商品详情子组件：

// 函数组件使用 React.memo
const ProductDetail = React.memo((props) => {
    // 组件逻辑
    return <div>{props.productData.description}</div>;
});

// 类组件使用 shouldComponentUpdate
class ProductDetailClass extends React.Component {
    shouldComponentUpdate(nextProps) {
        // 比较当前 props 和下一个 props 中的 productData 是否相同
        return this.props.productData!== nextProps.productData;
    }
    render() {
        return <div>{this.props.productData.description}</div>;
    }
}

优化数据传递：
- 避免在父组件的渲染函数中创建新的对象或函数作为 props 传递给子组件。因为每次父组件渲染时，新创建的对象或函数会导致子组件认为 props 发生了变化而重新渲染。
- 例如，不要这样做：

class ProductList extends React.Component {
    render() {
        const newFunction = () => {
            // 函数逻辑
        };
        return <ProductDetail productData={this.state.productData} action={newFunction} />;
    }
}

可以在类的构造函数或 useCallback（函数组件）中定义函数：

// 类组件
class ProductList extends React.Component {
    constructor(props) {
        super(props);
        this.action = this.action.bind(this);
    }
    action() {
        // 函数逻辑
    }
    render() {
        return <ProductDetail productData={this.state.productData} action={this.action} />;
    }
}

// 函数组件
import React, { useCallback } from'react';
const ProductList = (props) => {
    const action = useCallback(() => {
        // 函数逻辑
    }, []);
    return <ProductDetail productData={props.productData} action={action} />;
};

状态提升优化：
- 如果子组件有一些状态变化会影响父组件的逻辑，要合理提升状态。例如，商品详情中的“加入购物车”按钮状态，当点击按钮时，子组件将状态反馈给父组件，父组件统一管理购物车相关状态。
- 子组件：

const ProductDetail = ({ productData, onAddToCart }) => {
    return <button onClick={() => onAddToCart(productData)}>加入购物车</button>;
};

父组件：

import React, { useState } from'react';
const ProductList = () => {
    const [cart, setCart] = useState([]);
    const addToCart = (product) => {
        setCart([...cart, product]);
    };
    return <ProductDetail productData={productData} onAddToCart={addToCart} />;
};

高级技术或设计模式

单向数据流与 Flux 模式：
- Flux 模式强调单向数据流，通过一个中央 store 来管理应用的状态。虽然电商项目可能不会完全使用 Flux 架构，但借鉴单向数据流的思想，让数据从父组件流向子组件，子组件通过回调函数通知父组件状态变化，能使数据流更清晰，便于调试和性能优化。
- 例如，结合 Redux（基于 Flux 思想的库），商品数据存储在 Redux 的 store 中，商品列表和商品详情组件通过 connect（React - Redux 库的方法）连接到 store 获取数据。这样，当数据变化时，只会重新渲染相关的组件，而不是整个组件树。
观察者模式：
- 可以手动实现一个简单的观察者模式。例如，创建一个事件中心对象，商品列表组件和商品详情组件都订阅事件中心的某些事件。当某个组件发生特定操作（如商品加入购物车）时，发布事件，其他订阅该事件的组件做出相应反应。

// 事件中心
const eventCenter = {
    events: {},
    on(eventName, callback) {
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }
        this.events[eventName].push(callback);
    },
    emit(eventName, data) {
        if (this.events[eventName]) {
            this.events[eventName].forEach(callback => callback(data));
        }
    }
};

// 商品详情组件
const ProductDetail = ({ productData }) => {
    const addToCart = () => {
        eventCenter.emit('addToCart', productData);
    };
    return <button onClick={addToCart}>加入购物车</button>;
};

// 商品列表组件
const ProductList = () => {
    eventCenter.on('addToCart', (product) => {
        // 更新购物车显示等逻辑
    });
    return <div>商品列表</div>;
};

性能分析

减少渲染次数：通过 shouldComponentUpdate 或 React.memo 减少不必要的渲染，直接提升性能。例如，在一个有 100 个商品的列表中，如果每个商品详情组件每次父组件渲染都重新渲染，会消耗大量性能。而使用上述优化后，只有当商品数据真正变化时才重新渲染，大大减少了渲染次数。
优化数据传递：避免在渲染函数中创建新对象或函数作为 props 传递，防止子组件不必要的重新渲染。例如，在复杂的电商页面中，父组件频繁渲染，如果每次都创建新的函数传递给子组件，子组件会不断重新渲染，优化后可以保持函数引用不变，减少子组件重新渲染。
状态提升与单向数据流：合理的状态提升和单向数据流使数据变化可预测，便于性能优化。例如，使用 Redux 管理状态时，Redux 的机制可以精确控制哪些组件因状态变化而重新渲染，减少不必要的组件更新，提高整体性能。

星途面试题库

面试题：Vue父子组件通信在复杂业务场景下的优化与拓展

知识考点

面试题答案

优化方式

高级技术或设计模式

性能分析