面试题：Qwik 组件 Props 与状态管理在复杂交互场景下的优化策略

技术手段和设计模式

状态管理：使用 Zustand 或 Redux 进行全局状态管理。以 Zustand 为例，它轻量且易于上手，通过创建一个共享状态的 store，购物车状态可在这个 store 中管理。例如：

import create from 'zustand';

const useCartStore = create((set) => ({
  cart: [],
  addToCart: (product) => set((state) => ({ cart: [...state.cart, product] })),
  // 其他购物车操作方法
}));

筛选功能：在父组件中维护筛选状态，并通过 props 将筛选条件传递给商品列表子组件。子组件根据筛选条件过滤展示的商品。例如：

// 父组件
import React, { useState } from'react';
import ProductList from './ProductList';

const App = () => {
  const [filter, setFilter] = useState('');
  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="筛选商品"
      />
      <ProductList filter={filter} />
    </div>
  );
};

export default App;

// 子组件
import React from'react';

const ProductList = ({ filter }) => {
  // 根据filter过滤商品列表逻辑
  return (
    <div>
      {/* 商品列表展示 */}
    </div>
  );
};

export default ProductList;

性能优化 - React.memo 和 useCallback：对于商品子组件，使用 React.memo 包裹，它会浅比较 props，如果 props 没有变化则不会重新渲染。对于加入购物车的回调函数，使用 useCallback 包裹，确保其引用稳定，避免因父组件重新渲染导致子组件不必要的重新渲染。例如：

import React, { useCallback } from'react';
import { useCartStore } from './cartStore';

const ProductItem = React.memo(({ product }) => {
  const addToCart = useCartStore((state) => state.addToCart);
  const handleAddToCart = useCallback(() => {
    addToCart(product);
  }, [product, addToCart]);

  return (
    <div>
      <p>{product.name}</p>
      <button onClick={handleAddToCart}>加入购物车</button>
    </div>
  );
});

export default ProductItem;

可能遇到的性能问题及解决方案

问题：筛选条件频繁变化导致商品列表组件不必要的重新渲染。
- 解决方案：如上述使用 React.memo 包裹商品列表子组件以及商品子组件，确保只有在相关 props 变化时才重新渲染。同时，在父组件中使用 useState 合理管理筛选状态，避免不必要的状态更新。
问题：购物车状态更新时，可能导致不相关组件重新渲染。
- 解决方案：在状态管理库（如 Zustand）中，确保状态更新是精细粒度的。例如，只更新购物车相关的状态，而不是整个全局状态。并且在组件订阅状态时，使用 useSelector 等方法的精确选择器，只选择组件需要的状态部分，减少不必要的重新渲染。
问题：商品列表数据量过大，渲染性能问题。
- 解决方案：可以采用虚拟列表技术，如 react - virtualized 或 react - window。这些库可以只渲染视口内可见的商品项，大大提高渲染性能，即使商品数据量很大也不会影响性能。

星途面试题库

面试题：Qwik 组件 Props 与状态管理在复杂交互场景下的优化策略

知识考点

面试题答案

技术手段和设计模式

可能遇到的性能问题及解决方案