面试题：如何高效地更新React列表中的某一项

Question

假设你有一个使用React渲染的列表，现在需要高效地更新列表中的某一项数据，同时要保证不触发不必要的重新渲染。请描述更新的思路，并给出相关的代码示例，说明如何使用React的状态管理（如useState或useReducer）和列表操作方法来实现。

Answer 1

思路

1. 状态管理：使用useState或useReducer来管理列表数据。useState适用于简单状态更新，useReducer适用于复杂状态逻辑。
2. 列表操作：为了避免不必要的重新渲染，不直接修改原列表，而是创建原列表的副本，在副本上进行数据更新，然后将更新后的副本设置为新的状态。
3. 唯一标识：列表项需要有唯一的key，这有助于React高效地识别哪些项发生了变化。

代码示例（使用useState）

import React, { useState } from 'react';

const ItemList = () => {
  const [items, setItems] = useState([
    { id: 1, value: 'item1' },
    { id: 2, value: 'item2' },
    { id: 3, value: 'item3' }
  ]);

  const updateItem = (itemId, newVal) => {
    setItems(prevItems => prevItems.map(item =>
      item.id === itemId ? { ...item, value: newVal } : item
    ));
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.value}
            <input 
              type="text" 
              value={item.value} 
              onChange={(e) => updateItem(item.id, e.target.value)}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ItemList;

代码示例（使用useReducer）

import React, { useReducer } from 'react';

const initialState = [
  { id: 1, value: 'item1' },
  { id: 2, value: 'item2' },
  { id: 3, value: 'item3' }
];

const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_ITEM':
      return state.map(item =>
        item.id === action.itemId ? { ...item, value: action.newVal } : item
      );
    default:
      return state;
  }
};

const ItemList = () => {
  const [items, dispatch] = useReducer(reducer, initialState);

  const updateItem = (itemId, newVal) => {
    dispatch({ type: 'UPDATE_ITEM', itemId, newVal });
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.value}
            <input 
              type="text" 
              value={item.value} 
              onChange={(e) => updateItem(item.id, e.target.value)}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ItemList;