Guías de Make it Real
Search…
Más sobre estado
En React cada componente maneja su propio estado.
El estado de un componente es un objeto de sólo lectura que no debes modificar directamente como en el siguiente ejemplo:
1
// mal - no hagas esto
2
this.state.title = "Otro título";
Copied!
Para modificar el estado utiliza el método
setState:1
this.setState({ title: "Otro título" });
Copied!
El método
setState crea un nuevo estado (un nuevo objeto), no modifica el anterior. A esto se le conoce como inmutabilidad. La idea es que los cambios al estado sean explícitos y predecibles, y las aplicaciones más fáciles de mantener en el tiempo.Acostumbrarse a escribir código inmutable toma algún tiempo pero es una buena práctica. En este capítulo vamos a ver algunas técnicas para manipular arreglos y objetos de forma inmutable.
Arreglos
En vez de modificar el arreglo original para insertar, actualizar y eliminar elementos, lo que vamos a hacer es construir un nuevo arreglo con el cambio. Veamos cómo hacerlo.
Insertando elementos
Para insertar un elemento a un arreglo utiliza el método
concat que retorna un nuevo arreglo con el nuevo elemento:1
const arr = [1, 2, 3];
2
const newArr = arr.concat(4); // [1, 2, 3, 4]
3
4
// arr sigue siendo [1, 2, 3]
Copied!
Cambiando un elemento
Existen varias formas de cambiar un elemento de forma inmutable. La primera es con el método
map:1
const arr = [1, 2, 3];
2
3
// vamos a cambiar la segunda posición por un 0
4
const idx = 1;
5
const newArr = arr.map((elem, i) =>
6
idx === i ? 0 : elem
7
);
8
9
// arr: [1, 2 3]
10
// newArr: [1, 0, 3]
Copied!
La segunda es utilizando el método
slice y concat:1
const arr = [1, 2, 3];
2
3
const idx = 1;
4
const newArr = arr.slice(0. idx)
5
.concat(0)
6
.concat(arr.slice(idx + 1));
Copied!
La tercera es con el nuevo operador
... (spread) de JavaScript:1
const arr = [1, 2, 3];
2
3
const idx = 1;
4
const newArr = [
5
...arr.slice(0, idx),
6
0,
7
...arr.slice(idx + 1)
8
];
Copied!
Removiendo un elemento
Puedes remover un elemento de forma inmutable de varias formas. La primera es con el método
filter:1
const arr = [1, 2, 3];
2
3
// vamos a remover la segunda posición
4
const idx = 1;
5
const newArr = arr.filter((e, i) => idx != i);
6
7
// arr: [1, 2 3]
8
// newArr: [1, 3]
Copied!
La segunda es utilizando el método
slice y concat:1
const arr = [1, 2, 3];
2
3
const idx = 1;
4
const newArr = arr.slice(0, idx).
5
.concat(arr.slice(idx + 1));
Copied!
La tercera es con el nuevo operador
... (spread):1
const arr = [1, 2, 3];
2
3
const idx = 1;
4
const newArr = [
5
...arr.slice(0, idx),
6
...arr.slice(idx + 1)
7
];
Copied!
Last modified 1yr ago