class albumList extends PureComponent {
    constructor(props) {
        super(props)
        this.play = this.play.bind(this)
    }
    play(song) {
        console.log(song)
    }
    render() {
        return(
            <div className="album-list">
                {
                    this.props.data.map((item,index)=>{
                        return (
                            <div className="album-list-item" key={index}>
                                    <img onClick={this.play } alt="" src="./img/album-list-play.png" />
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

in the above code, the event play is bound in the way of bind in the constructor, but it seems that it can"t get through the parameters. Binding the event in the constructor is the recommended optimization scheme in react, and if you want to pass parameters, how do you write it?

how react binds events:

1. binds the method directly to the bind in the element, but each time render triggers the function
2. use the arrow function in the element so that you can pass parameters, but you will find that this is just putting the same function in different memory