面试题：React中State和Props的性能优化与设计考量

State使用引发性能瓶颈的方式

频繁更新State：在处理大量数据时，如果频繁调用 setState，每次更新都会触发组件重新渲染，即使数据变化可能对渲染结果影响不大，导致性能下降。例如在一个实时更新的大数据列表中，每次微小的数据变动都调用 setState。
非必要的State提升：将一些本可以在子组件内部管理的状态提升到父组件，会导致不必要的重新渲染。比如子组件中一个仅用于控制自身样式的状态，却提升到了父组件管理。

Props使用引发性能瓶颈的方式

深层嵌套传递Props：在大型组件树中，当一个组件需要将Props传递给深层嵌套的子组件时，中间的多层组件都会因Props变化而重新渲染，即使它们并不关心这些Props的改变。例如一个导航栏组件的属性，需要经过多层组件传递到页面底部的某个小部件。
传递函数作为Props：每次父组件重新渲染时，传递给子组件的函数都会是一个新的实例，这会导致子组件认为Props发生变化而重新渲染，即使函数的逻辑并未改变。比如父组件传递一个点击处理函数给子组件，父组件每次渲染都会生成新的函数实例。

优化State管理

使用Reducer：
- 原理：Reducer基于纯函数的方式管理状态，通过接收当前状态和一个action，返回新的状态。这样可以更清晰地管理复杂的状态逻辑，并且便于进行状态回溯等操作。
- 实际场景及方案：在一个电商购物车项目中，购物车状态包括商品列表、总价、优惠等复杂信息。使用Reducer可以将添加商品、删除商品、计算总价等操作通过不同的action进行管理。例如：

// 定义reducer
const cartReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_ITEM':
            return {
               ...state,
                items: [...state.items, action.item],
                total: state.total + action.item.price
            };
        case 'REMOVE_ITEM':
            const newItems = state.items.filter(item => item.id!== action.itemId);
            return {
               ...state,
                items: newItems,
                total: state.total - newItems.find(item => item.id === action.itemId).price
            };
        default:
            return state;
    }
};

// 使用Reducer
const [cartState, dispatch] = useReducer(cartReducer, { items: [], total: 0 });

使用Immutable.js：
- 原理：Immutable.js提供了不可变数据结构，每次数据变化都会返回新的对象，而不是直接修改原对象。这样可以方便地进行数据对比，避免不必要的重新渲染。
- 实际场景及方案：在一个多人协作的文档编辑项目中，文档数据结构复杂且经常变化。使用Immutable.js可以确保数据的不可变性，例如：

import { Map, List } from 'immutable';

// 初始文档数据
const initialDoc = Map({
    title: 'My Document',
    content: List(['First line', 'Second line'])
});

// 更新文档内容
const newDoc = initialDoc.update('content', content => content.push('New line'));

优化Props传递策略

使用shouldComponentUpdate：
- 原理：在类组件中，shouldComponentUpdate 方法允许开发者自定义组件是否应该重新渲染。通过对比新旧Props和State，可以决定是否跳过渲染，从而提升性能。
- 实际场景及方案：在一个展示商品列表的组件中，列表数据可能频繁变化，但商品图片的展示组件可能只依赖于商品的图片URL，不依赖其他频繁变化的数据。可以在商品图片展示组件中使用 shouldComponentUpdate：

class ProductImage extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return this.props.imageUrl!== nextProps.imageUrl;
    }
    render() {
        return <img src={this.props.imageUrl} alt={this.props.altText} />;
    }
}

使用React.memo：
- 原理：对于函数组件，React.memo 是一个高阶组件，它会对组件的Props进行浅比较。如果Props没有变化，组件将不会重新渲染。
- 实际场景及方案：在一个展示用户信息的组件中，该组件只依赖于用户的基本信息（如用户名、头像等），这些信息不经常变化。可以使用 React.memo 包裹该组件：

const UserInfo = React.memo(({ username, avatar }) => {
    return (
        <div>
            <img src={avatar} alt={username} />
            <p>{username}</p>
        </div>
    );
});

星途面试题库

面试题：React中State和Props的性能优化与设计考量

知识考点

面试题答案

State使用引发性能瓶颈的方式

Props使用引发性能瓶颈的方式

优化State管理

优化Props传递策略