在React的render方法中使用箭头函数

在 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 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议使用 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})
  }
  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。所以通常还是把方法都写在实例上。

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方法中使用箭头函数')
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>{this.state.count}</button>
        <Child callbackFn={this.callbackFn} />
      </div>
    )
  }
}

export default Foo;

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