Quel est l'avantage d'utiliser $ splice (de immutability-helper) sur un filtre pour supprimer un élément d'un tableau dans React?

Question

J'utilise immutability-helper pour effectuer des opérations CRUD sur des données d'état et je veux savoir si je devrais toujours utiliser $splice pour supprimer des données ou est-ce que je peux utiliser filter (puisqu'il n'est pas destructeur)?

Par exemple, disons que j'ai un tableau d'objets:

todos = [ 
{id: 1, body: "eat"}, 
{id: 2, body: "drink"}, 
{id: 3, body: "sleep"}, 
{id: 4, body: "run"} 
] 

Étant donné un code d'article, je peux l'enlever de deux façons:

a. trouver son index et utiliser $splice:

index = todos.findIndex((t) => { return(t.id === id) }); 
newtodos = update(todos, { $splice: [[index, 1]] }) 

OU

b. utiliser filter:

newtodos = todos.filter((t) => { return(t.id === id) }); 

filter est plus concis, mais je ne sais pas si elle a des inconvénients par rapport à l'utilisation $splice dans ce cas.

Answer 1

utilisation immutability-helper:

il est commode de traiter nested collection:

const collection = [1, 2, {todos: [...todos]}]; 

    const newCollection = update(collection, 
     { 
      2: { 
       todos: { 
        $apply: todos => todos.filter(t => t.id !== id) 
       } 
      } 
     } 
    ); 

et, il vous donne une nouvelle copie pour collection et collection[2]:

console.log(newCollection === collection, newCollection[2] === collection[2]); 
    //false false 

Donc, si vous utilisez react-redux , connect état à composant, si vous voulez votre composant re-rendre lorsque l'état a changé, vous devez renvoyer une nouvelle copie de l'état.

Est-ce que cet opérateur ancienne:

const todoList = collection[2].todos; 
    const idx = todoList.findIndex(t => t.id === id); 
    const newTodoList = update(todoList, {$splice: [[index, 1]]}); 
    const newCollectionTwo = [...collection]; 
    newCollectionTwo[2] = { 
     todos: newTodoList 
    }; 

et jeter un oeil avec la console:

console.log(collection, newCollectionTwo, collection === newCollectionTwo, collection[2] === newCollectionTwo[2]); 

pour la structure de données simple et opérateur, je pense qu'il est égal à filter.

Désolé pour mon anglais n'est pas bon, et c'est mon opinion.