在 React 组件中绑定点击事件通常的做法使用 class 属性。

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

但是有时候为了更迅速的完成代码逻辑，我们也常常是直接写在 render 方法中。

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

并且使用箭头函数是向回调函数传递参数的最简单的办法。

注意：

在 render 方法中使用箭头函数也会在每次组件渲染时创建一个新的函数，这会破坏 React 基于恒等比较的性能优化。

Diffing 算法当对比两颗树时，React 首先比较两棵树的根节点。当对比两个相同类型的 React 元素时，React 会保留 DOM 节点，仅比对及更新有改变的属性。

如果你在 render 方法里创建函数。因为浅比较 props 的时候总会得到 false。

在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。

import React from 'react';class Child extends React.PureComponent {render () {console.log('导致重新渲染')return (<div>todo</div>)}
}class Foo extends React.Component {state = {count: 0}handleClick = () => {this.setState({count: this.state.count+1})}render() {return (<div><button onClick={this.handleClick}>{this.state.count}</button><Child callbackFn={() => { console.log('在render方法中使用箭头函数') }} /></div>)}
}export default Foo;

PureComponent 的实现原理是通过浅层对比 prop 和 state 的方式来实现的。

如果你在 render 方法里创建函数。因为浅比较 props 的时候总会得到 false。我们通常建议使用 class 属性的语法来避免这类性能问题。

import React from 'react';class Child extends React.PureComponent {render () {console.log('重新渲染')return (<div>todo</div>)}
}class Foo extends React.Component {state = {count: 0}handleClick = () => {this.setState({count: this.state.count+1})}callbackFn = () => {console.log('实例上的方法')}render() {return (<div><button onClick={this.handleClick}>{this.state.count}</button><Child callbackFn={this.callbackFn} /></div>)}
}export default Foo;

这是类组件的做法，可以把方法写在实例中，如果是函数组件的化那就需要使用 useCallback 处理。