Estoy empezando con react, y como ejercicio quiero hacer un cargador de imágenes drag & drop utilizando componentes.
El problema es que al cargar una imagen el consumo de memoria RAM del navegador se eleva, pero al arrastrar nuevamente imágenes al componente, el consumo de memoria se vuelve a elevar a pesar de que las imágenes anteriormente cargadas ya se eliminaron.
class ImagesLoader extends React.Component{
constructor(props){
super(props)
this.state = {images: []}
this.AddImages = this.AddImages.bind(this)
this.handleUpdateImages = this.handleUpdateImages.bind(this)
}
AddImages(e){
e.preventDefault()
let images= []
let files = e.dataTransfer.files
for(let i = 0; i < files.length;i++){
let file = files[i]
if(file.type.split('/')[0] === "image"){
let name = file.name.substring(0,file.name.lastIndexOf("."))
let newImage = {
title: name,
file: file,
category: 1
}
images.push(newImage)
}
}
this.setState({
images: images
})
}
handleUpdateImages(upImages){
this.setState({images: upImages})
}
render(){
return(
<div
className="ImagesLoader">
<Droparea onDropFiles={this.AddImages}/>
<Previews
images={this.state.images}
onUpdateImages={this.handleUpdateImages}
/>
</div>
)
}
}
class Droparea extends React.Component{
constructor(props){
super(props)
this.handleDragOver = this.handleDragOver.bind(this)
this.handleDragLeave = this.handleDragLeave.bind(this)
}
handleDragOver(e){
e.preventDefault()
let target = e.target
target.classList.add('over')
}
handleDragLeave(e){
e.preventDefault()
let target = e.target
target.classList.remove('over')
}
render(){
return(
<div
className="Droparea"
onDragOver={this.handleDragOver}
onDragLeave={this.handleDragLeave}
onDrop={this.props.onDropFiles}>
<span className="Droparea-text"> Drag your elements Here. </span>
</div>
)
}
}
class Previews extends React.Component{
constructor(props){
super(props)
this.handleChangeItem = this.handleChangeItem.bind(this)
}
handleChangeItem(oldItem,prop,newValue){
let images = this.props.images
images.map((image) => {
if(image === oldItem){
image[prop] = newValue
}
})
this.props.onUpdateImages(images)
}
render(){
let images = this.props.images
const imageList = images.map(image =>
<PreviewItem
key={image.file.name}
image={image}
onChangeItem={this.handleChangeItem}/>
)
return(
<ul className="Previews">
{imageList}
</ul>
)
}
}
class PreviewItem extends React.Component{
constructor(props){
super(props)
this.handleChangeTitle = this.handleChangeTitle.bind(this)
this.handleChangeCategory = this.handleChangeCategory.bind(this)
}
handleChangeTitle(value){
this.props.onChangeItem(this.props.image,'title',value)
}
handleChangeCategory(value){
this.props.onChangeItem(this.props.image,'category',value)
}
render(){
return(
<li className="Preview-item">
<PreviewItemImg image={this.props.image}/>
<PreviewItemForm
image={this.props.image}
onChangeTitle={this.handleChangeTitle}
onChangeCategory={this.handleChangeCategory}
/>
</li>
)
}
}
class PreviewItemImg extends React.Component{
constructor(props){
super(props)
this.state = {image: this.props.image, src: false}
this.getImage().then(src => {
this.setState({src: src.src})
})
}
getImage(){
return new Promise((resolve,reject) => {
let image = this.props.image.file
let fileReader = new FileReader()
fileReader.onload = function(){
let base64 = this.result
let img = new Image()
img.onload = function(){
resolve(this)
}
img.src = base64
}
fileReader.readAsDataURL(image)
})
}
render(){
if(!this.state.src){
return null
}
return(
<div className="Preview-item-img">
<img className="Item-img" src={this.state.src}/>
</div>
)
}
}
class PreviewItemForm extends React.Component{
constructor(props){
super(props)
let title = (this.props.image.file.name === this.props.image.name)
? this.props.image.file.name
: this.props.image.title
this.state = {
title: title,
category: this.props.image.category
}
this.handleChangeTitle = this.handleChangeTitle.bind(this)
this.handleChangeCategory = this.handleChangeCategory.bind(this)
}
handleChangeTitle(e){
let value = e.target.value
this.setState({title: value})
this.props.onChangeTitle(value)
}
handleChangeCategory(e){
let value = e.target.value
this.setState({category: value})
this.props.onChangeCategory(value)
}
render(){
const categories = [
{value: 1, name: 'Animals'},
{value: 2, name: 'Cgi'},
{value: 3, name: 'Landscapes'},
{value: 4, name: 'Women'}
]
return(
<form className="Preview-item-form">
<input type="text"
placeholder="Insert title"
onChange={this.handleChangeTitle}
value={this.state.title}
/>
<select value={this.state.category}
onChange={this.handleChangeCategory}>
{
categories.map((c) =>
<option
key={c.value}
value={c.value}>
{c.name}
</option>
)
}
</select>
</form>
)
}
}
ReactDOM.render(
<ImagesLoader />,
document.getElementById('root')
);
.ImagesLoader {
font-family: Ubuntu;
width: 100%;
}
.ImagesLoader .Droparea {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
min-height: 300px;
height: 30%;
width: 100%;
background-color: #1a1a1a;
color: #808080;
transition: all 0.2s ease-in;
}
.ImagesLoader .Droparea.over {
color: #1a1a1a;
background-color: #ff6347;
}
.ImagesLoader .Previews {
padding: 0;
margin: 0;
min-height: 600px;
width: 100%;
}
.ImagesLoader .Previews .Preview-item {
list-style-type: none;
margin: 0;
padding: 0;
border: dashed 1px #ff6347;
}
.Preview-item-img {
position: relative;
}
.Preview-item-img img {
position: relative;
max-width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'>
</div>
Que creen que sea la causa del problema referente a la memoria RAM?
NOTA:
Si observan alguna mala práctica en mi código por favor háganmelo saber,