¿Qué son datos inmutables?
Los datos inmutables se refieren a datos que no se pueden cambiar una vez que se crea.
Al usar datos inmutables, podemos lidiar fácilmente con el almacenamiento en caché, el respaldo, la detección de cambios de datos y otros problemas, y simplificar nuestro desarrollo.
Datos inmutables en JS
En JavaScript, podemos simular datos inmutables a través de un clon profundo, lo que significa que cada vez que operemos en los datos, utilizaremos clones profundos de los datos para crear un nuevo datos.
clon
/** * INMUTABLE DE APRENDIZACIÓN-Clone-Deep.js * Creado por MDS el 15/6/6. */'use estricto'; var clonedeep = request ('lodash.clonedeep'); var data = {id: 'data', autor: {name: 'mdemo', github: 'https://github.com/demohi'}}; var data1 = clonedeep (data); console.log ('igual:', data1 === data); //falsedata1.id = 'data1'; data1.author.name = 'DeMohi'; console.log (data.id); // data console.log (data1.id); // data1console.log (data.author.name); // mdemo console.log (data1.author.name); // DemohiPor supuesto, puede darse cuenta de que esto es muy lento. Como se muestra a continuación, de hecho es muy lento
Immutable.js es un proyecto abierto de Facebook. Es principalmente para resolver el problema de los datos inmutables de JavaScript. Proporciona una manera más eficiente al referirse a los intentos de mapas hash y los intentos vectoriales.
En pocas palabras, inmutable.js resuelve los problemas de rendimiento a través del intercambio estructural. Primero vamos a ver un video para ver cuán inmutable.js está hecho
Cuando ocurre una operación establecida, Inmutable.js solo clonará las piezas por encima de su nivel principal, y las otras permanecerán sin cambios, para que todos puedan compartir las mismas partes, lo que puede mejorar en gran medida el rendimiento.
Cualquiera que esté familiarizado con React.js debe saber que React.js es un marco con UI = F (estados). Para resolver el problema de actualización, React.js usa Virtual DOM. Virtual DOM utiliza DIFF para modificar el DOM para lograr actualizaciones de DOM eficientes.
Suena perfecto, pero hay un problema. Cuando se actualiza el estado, si los datos no cambian, también hará DOM Virtual DOM, lo que causará desechos. Esta situación es realmente muy común, consulte el artículo Flummox
Por supuesto, puede decir que puede usar Purerendermixin para resolverla. Purerendermixin es algo bueno, podemos usarla para resolver algunos de los problemas anteriores, pero si presta atención, puede ver el siguiente mensaje en el documento.
La copia del código es la siguiente:
Esto solo compara superficialmente los objetos. Si estos contienen estructuras de datos complejas, puede producir falsos negativos para diferencias más profundas. Solo mezcle en componentes que tienen accesorios y estado simples, o usen ForceUpdate () cuando sepa que las estructuras de datos profundos han cambiado. O considere el uso de objetos inmutables para facilitar las comparaciones rápidas de los datos anidados.
Purerendermixin es solo una comparación simple superficial y no se usa para comparaciones de múltiples capas. ¿Qué tengo que hacer? ? Si hace comparaciones complejas usted mismo, el rendimiento será muy pobre.
La solución es usar Immutable.js para resolver este problema. Debido a que mientras haya un cambio de datos en cada actualización de estado, Purerendermixin puede determinar inmediatamente el cambio de datos, lo que puede mejorar en gran medida el rendimiento. Esta parte también se puede encontrar en los ayudantes de inmutabilidad del documento oficial
Resumen: use PureRendermixin + Immutable.js
React.js conf 2015 - datos inmutables y reaccionar
Ayudantes de inmutabilidad
Pureendermixina
inmutable-js