Peut trop de gestionnaires d'événements impact sur les performances d'une application-React?

voix
2

J'ai un Toggler button qui ouvre un menu déroulant. Pour ajouter une fonctionnalité où si l'utilisateur clique partout sur l'écran autre que ce menu, le menu déroulant devrait se fermé. Donc, pour cela, je dois créer gestionnaire de clic et de garder l'enregistrement du noeud à partir duquel le clic est arrivé. Si le clic a été à l' extérieur du nœud déroulant, le menu devrait se fermé. Voici le code:

  state = {
    menuTogglerOpen: false
  }

  componentWillMount() {
    document.addEventListener(mousedown, this.handleClick, false)
  }
  componentWillUnmount() {
    document.removeEventListener(mousedown, this.handleClick, false)
  }

  handleClick = event => {
    if (this.togglerNode.contains(event.target)) {
      return
    }
    this.closeMenuTogglerFromOutside()
  }

  closeMenuTogglerFromOutside = () => {
    this.setState({
      menuTogglerOpen: false
    })
  }

  handleMenuToggler = () => {
    this.setState({
      menuTogglerOpen: !this.state.menuTogglerOpen
    })
  }

JSX

<Toggler ref={currentNode=> (this.togglerNode = currentNode)}>
  <button onClick={this.handleMenuToggler}>
                <svg
                  ...button SVG...
                </svg>
              </button>
  {this.state.menuTogglerOpen && (
  <TogglerDropDown>
    <div className=_dropdown_caret />
    <div className=_dropdown>
      <ul>
        <li>puspender</li>
        <li>settings</li>
        <li>help</li>
        <li>logout</li>
      </ul>
    </div>
  </TogglerDropDown>
  )}
</Toggler>
</HeaderGroup>
</SiteHeaderRight>   

Sur cette approche, chaque clic (partout sur l'écran) appelle la méthode handleClick. Se pourrait-il un impact sur la performance des applications? Si oui, quelle est la meilleure façon de gérer cet événement?

Mise à jour
Comme suggéré par Alexei, voici la solution que je mis en œuvre:

handleClick = event => {
    if (this.togglerNode.contains(event.target)) {
      return
    }
    this.closeMenuToggler()
  }

  openMenuToggler = () => {
    document.addEventListener(mousedown, this.handleClick, false)
    this.setState({
      menuTogglerOpen: true
    })
  }

  closeMenuToggler = () => {
    document.removeEventListener(mousedown, this.handleClick, false)
    this.setState({
      menuTogglerOpen: false
    })
  }

  handleMenuToggler = () => {
    if (this.state.menuTogglerOpen) {
      this.closeMenuToggler()
    } else {
      this.openMenuToggler()
    }
  }
Créé 20/10/2018 à 03:40
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

Commentaire:

Vous pouvez joindre l'écouteur d'événement lorsque le menu ouvre, et retirez-le lorsque le menu se ferme. Traditionnellement, c'est la façon dont la plupart des modaux sont mises en œuvre. Seulement lorsque le modal est ouvert voulez-vous écouter l'événement click-to-close.

Cela peut ou peut ne pas appliquer à votre base de code , mais vous pouvez également envisager de retirer l'écouteur d'événement sur componentWillUnmountcette façon , vous évitez les éventuelles fuites de mémoire. Cela couvre le cas où les démontages composants sans faire appel closeMenuTogglerdans ce cas , vous aurez quitté le fonctionnement écouteur d'événement rassis.

componentWillUnMount() {
  if (this.state.menuTogglerOpen) {
    document.removeEventListener("mousedown", this.handleClick, false)
  }
}

handleClick = event => {
  if (this.togglerNode.contains(event.target)) {
    return
  }
  this.closeMenuToggler()
}

openMenuToggler = () => {
  document.addEventListener("mousedown", this.handleClick, false)
  this.setState({
    menuTogglerOpen: true
  })
}

closeMenuToggler = () => {
  document.removeEventListener("mousedown", this.handleClick, false)
  this.setState({
    menuTogglerOpen: false
  })
}

handleMenuToggler = () => {
  if (this.state.menuTogglerOpen) {
    this.closeMenuToggler()
  } else {
    this.openMenuToggler()
  }
}
Créé 20/10/2018 à 14:17
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more