React组件中的事件处理函数

constructor函数中bind

class ReactEvent extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }

 

使用箭头函数(实验语法，尚未标准化)

render中使用箭头函数

class ReactEvent extends Component { handleClick() { console.log('Click'); } render() { return <button onClick={() => this.handleClick()}>Click Me</button>; } }

 

使用class fields语法（https://babeljs.io/docs/en/ba...）

class ReactEvent extends Component { //此函数会被绑定到ReactEvent类的实例 handleClick = () => { console.log('Click'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }

 

在render中使用bind

class ReactEvent extends Component { handleClick() { console.log('Click'); } render() { return <button onClick={this.handleClick.bind(this)}>Click Me</button>; } }

 

几种方式比较

影响	constructor函数中bind	使用class fields语法	render中使用箭头函数	在render中使用bind
render时生成新函数	否	否	是	是
性能	无影响	无影响	有影响	有影响
可直接携带参数	否	否	是	是
简洁性	不好	好	好	好

上表中我们看到，在render中直接bind或者箭头函数都会影响性能，原因在于，在render 中的bind和箭头函数在每次render时都会创建新的函数，导致子组件的props发生改变，这在PureComponent中会影响性能，除非自己在shouldComponentUpdate中进行优化。

//仅作为示例代码，不遵循常用代码规范 //子组件 class Button extends React.PureComponent { render() { console.log('================') return ( <button onClick={this.props.handleClick}>hahaha</button> ) } } //父组件 class ButtonList extends React.Component { constructor(props) { super(props); this.state = { index: -1, list: [1, 2, 3, 4] }; this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click'); } onStateChange = () => { this.setState({ index: 1 }); } render() { return ( <div> <button onClick={this.onStateChange}>stateChange</button> { this.state.list.map(item => <Button handleClick={this.handleClick}/>) } </div> ) } } ReactDOM.render( <ButtonList />, document.getElementById('root') );

1

事件处理中传参

在开发当中，经常遇到对一个列表做操作，可能包含删除，修改，查看。这时候绑定事件就需要传参，通常为id。

 

直接传递参数

  //render中使用箭头函数 { this.state.list.map(item => ( <Button onClick={() => this.handleClick(item.id)}/> )) }

  //render中使用bind { this.state.list.map(item => ( <Button onClick={this.handleClick.bind(this, item.id)}/> )) }

使用data属性

  //handleClick中通过e.target.dataset.id获取 { this.state.list.map(item => ( <Button data-id={item.id} onClick={this.handleClick}/> )) }

资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

总结

这里不强制推荐使用哪一种，对于各个团队来说，可以根据项目，选择自己团队的事件绑定方式。

因为箭头函数的简洁性，在公司项目中，我们团队通常使用class fields 定义箭头函数来绑定事件。当需要传参的时，单个参数传递使用data属性传参。多个参数传递时，采用拆分子组件的方式回调传参。

//子组件 class Button extends React.PureComponent { handleClick = () => { this.props.handleClick(this.props.item); } render() { return ( <button onClick={this.handleClick}>hahaha</button> ) } } //父组件 class ButtonList extends React.Component { constructor(props) { super(props); this.state = { list: [1, 2, 3, 4] }; } handleClick = (item) => { console.log('Click', item); } render() { const { list=[] } = this.state; return ( <div> { list.map(item => <Button handleClick={this.handleClick} item={item}/>) } </div> ) } } ReactDOM.render( <ButtonList />, document.getElementById('root') );