Passing-Funktion mit Grenze verursacht Diffing, ohne zu rendern

Question

Wenn A rendert B passiert es handleClick-Funktion mit diesem gebunden. Dies führt dazu, dass previousProps.onClick! == nextProps.onClick, da die Bindung jedes Mal neue Funktion erstellt. Wie kann man das verhindern? Ich könnte "shouldComponentUpdate" verwenden, aber gibt es bessere Möglichkeiten?

Answer 1

Anstatt das Verfahren innerhalb der Methode machen binden, binden die Funktion innerhalb des Konstrukteurs, wie folgt aus:

import {autobind} from "cure-decorators" 

@autobind 
class A extends React.Component {  
    handleClick() { 
    console.log("Hello from the other side"); 
    } 

    render() { 
    <B onClick={this.handleClick}/> 
    } 
} 

class B extends React.Component() { 
    render() { 
    return <div>Useless stuff/> 
    } 
} 

:

class A extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    console.log("Hello from the other side"); 
    } 

    render() { 
    <B onClick={this.handleClick}/> 
    } 
} 

class B extends React.Component() { 
    render() { 
    return <div>Useless stuff/> 
    } 
} 

Sie auch autobind von Kern-Dekorateure wie so verwenden könnte

wenn Sie Dekorateure verwenden.