O que são dados imutáveis
Dados imutáveis referem -se a dados que não podem ser alterados depois de criados.
Usando dados imutáveis, podemos lidar facilmente com armazenamento em cache, fallback, detecção de alterações de dados e outros problemas e simplificar nosso desenvolvimento.
Dados imutáveis em JS
No JavaScript, podemos simular dados imutáveis através do clone profundo, o que significa que toda vez que operamos nos dados, usaremos clones profundos dos dados para criar um novo dados.
clone profundo
/** * Learning-Imutable-clone-seep.js * criado pelo MDS em 15/6/6. */'Use Strict'; var clonedeep = requer ('lodash.cloned'); var data = {id: 'dados', autor: {name: 'mdemo', github: 'https://github.com/demohi'}}; var dados1 = cloneep (data); console.log ('igual:',, ',', //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) // DemohiClaro que você pode perceber que isso é muito lento. Como mostrado abaixo, é realmente muito lento
imutable.js é um projeto aberto pelo Facebook. É principalmente resolver o problema dos dados imutáveis de JavaScript. Ele fornece uma maneira mais eficiente, referindo -se a mapas de hash e tentativas de vetor.
Simplificando, imutable.js resolve problemas de desempenho por meio de compartilhamento estrutural. Vamos primeiro assistir a um vídeo para ver como imutável.js é feito
Quando ocorre uma operação definida, o imutável.js apenas clona as partes acima do nível dos pais, e os outros permanecerão inalterados, para que todos possam compartilhar as mesmas partes, o que pode melhorar bastante o desempenho.
Qualquer pessoa que esteja familiarizada com o React.js deve saber que o React.js é uma estrutura com UI = f (estados). Para resolver o problema de atualização, o React.js usa o Virtual DOM. O Virtual Dom usa o DIFF para modificar o DOM para obter atualizações eficientes do DOM.
Parece perfeito, mas há um problema. Quando o estado for atualizado, se os dados não alterarem, você também fará o DOM virtual, o que causará desperdício. Esta situação é realmente muito comum, consulte o artigo Flummox
É claro que você pode dizer que pode usar o purerendermixina para resolvê -lo. O PureRenderMixin é uma coisa boa, podemos usá -la para resolver alguns dos problemas acima, mas se você prestar atenção, poderá ver o seguinte prompt no documento.
A cópia do código é a seguinte:
Isso apenas compara superficialmente os objetos. Se eles contiverem estruturas de dados complexas, poderá produzir falsos negativos para diferenças mais profundas. Somente misture com componentes que possuem adereços simples e estado ou use forceUpdate () quando você souber que as estruturas de dados profundas foram alteradas. Ou considere o uso de objetos imutáveis para facilitar comparações rápidas de dados aninhados.
A purerendermixina é apenas uma comparação superficial simples e não é usada para comparações de várias camadas. O que devo fazer? ? Se você fizer comparações complexas, o desempenho será muito ruim.
A solução é usar imutável.js para resolver esse problema. Porque, enquanto houver alteração de dados em cada atualização de estado, a purerendermixin pode determinar imediatamente a alteração dos dados, o que pode melhorar bastante o desempenho. Esta parte também pode ser encontrada no documento oficial ajudante de imutabilidade
Resumo: use purererendermixin + imutable.js
React.js Conf 2015 - Dados imutáveis e reagem
Ajudantes de imutabilidade
Purerendermixin
imutável-js