面试题：React使用Immutable数据结构时处理列表更新的最佳实践

1. 使用 Immutable.js 库

首先，引入 Immutable.js 库来处理 Immutable 数据结构。例如：

import { List, Map } from 'immutable';

2. 初始化数据

假设列表项是简单对象，可这样初始化：

const initialList = List([
  Map({ id: 1, value: 'item1' }),
  Map({ id: 2, value: 'item2' })
]);

3. 添加操作

// 添加新项
const addItem = (list, newItem) => {
  return list.push(Map(newItem));
};

当需要添加新项时，调用 addItem 函数并传入当前列表和新项数据。例如：

const newList = addItem(initialList, { id: 3, value: 'item3' });

4. 删除操作

// 根据 id 删除项
const removeItem = (list, itemId) => {
  return list.filter(item => item.get('id')!== itemId);
};

使用 removeItem 函数删除项：

const updatedList = removeItem(initialList, 2);

5. 修改操作

// 根据 id 修改项
const updateItem = (list, itemId, updatedData) => {
  return list.map(item => {
    if (item.get('id') === itemId) {
      return item.merge(updatedData);
    }
    return item;
  });
};

修改项时：

const newData = { value: 'updated item1' };
const modifiedList = updateItem(initialList, 1, newData);

6. 触发 React 组件重新渲染

在 React 组件中，将 Immutable 数据存储在 state 中。当数据发生变化时，更新 state 以触发重新渲染。例如：

import React, { Component } from'react';
import { List, Map } from 'immutable';

class MyList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: List([
        Map({ id: 1, value: 'item1' }),
        Map({ id: 2, value: 'item2' })
      ])
    };
  }

  addNewItem = () => {
    const newItem = { id: 3, value: 'item3' };
    const newList = this.state.list.push(Map(newItem));
    this.setState({ list: newList });
  };

  removeListItem = (itemId) => {
    const newList = this.state.list.filter(item => item.get('id')!== itemId);
    this.setState({ list: newList });
  };

  updateListItem = (itemId, updatedData) => {
    const newList = this.state.list.map(item => {
      if (item.get('id') === itemId) {
        return item.merge(updatedData);
      }
      return item;
    });
    this.setState({ list: newList });
  };

  render() {
    return (
      <div>
        <button onClick={this.addNewItem}>Add Item</button>
        {this.state.list.map(item => (
          <div key={item.get('id')}>
            {item.get('value')}
            <button onClick={() => this.removeListItem(item.get('id'))}>Remove</button>
            <button onClick={() => this.updateListItem(item.get('id'), { value: 'updated' })}>Update</button>
          </div>
        ))}
      </div>
    );
  }
}

export default MyList;

7. 确保 Immutable 数据结构完整性及避免性能问题

浅比较：在 React 组件中，使用 shouldComponentUpdate 或 React.memo 进行浅比较。由于 Immutable 数据结构保证数据一旦创建就不可变，所以只要引用不变，数据就不变。例如，使用 React.memo 包裹展示列表的子组件：

const ListItem = React.memo(({ item }) => {
  return (
    <div>
      {item.get('value')}
    </div>
  );
});

批量更新：如果有多个 Immutable 数据操作，可以批量处理以减少不必要的重新渲染。例如，在 setState 中传递函数形式，让 React 合并多个 setState 操作：

this.setState(prevState => {
  let newList = prevState.list;
  newList = addItem(newList, { id: 4, value: 'item4' });
  newList = removeItem(newList, 1);
  return { list: newList };
});

星途面试题库