在React组件render中调用柯里化函数是否存在性能负面影响？

好问题！这确实是React性能优化里容易踩坑的细节点，咱们把这个问题拆得明明白白：

先回顾基础最佳实践 #

首先你提到的核心逻辑完全正确：把事件处理函数声明为组件方法（而非render内联），能避免父组件每次render时创建新的函数引用，从而不会干扰子组件的shouldComponentUpdate（比如子组件是PureComponent或者自定义了浅比较的更新逻辑时，不会因为函数props引用变化而触发不必要的重渲染）。

举个例子，这种写法是推荐的：

<button onClick={this.handleClick} />

而下面这种内联箭头函数的写法，每次父组件render都会生成新的函数，容易导致子组件无意义重渲染：

<button onClick={e => someAction(e)} />

重点：柯里化函数的情况 #

那回到你的问题：class组件里用类字段定义的柯里化函数，比如handleClick = data => ...，会不会每次创建新函数？这里要分两种情况看：

1. 柯里化函数本身的创建时机 #

如果是用类字段语法定义的柯里化函数，比如：

class Parent extends Component {
  // 这个柯里化函数只会在组件实例创建时生成一次
  handleClick = (data) => (e) => {
    console.log('触发事件，数据：', data, '事件对象：', e);
  }

  render() {
    // 注意：这里每次render都会调用this.handleClick('xxx')，返回新的函数引用
    return <ChildButton onClick={this.handleClick('myData')} />;
  }
}

这里的this.handleClick本身是组件实例化时就创建好的，不会每次render重新生成。但问题出在每次render时调用this.handleClick('myData')，都会返回一个全新的箭头函数——这个返回的函数引用每次都是新的，就和你之前提到的内联箭头函数一样，会导致子组件接收到的onClickprops每次都是新值，干扰shouldComponentUpdate的判断。

2. 如何避免柯里化带来的性能问题 #

如果想要用柯里化传递额外数据，同时避免每次render生成新函数，可以试试这两种方案：

• 方案一：拆分数据与事件处理函数
  把需要传递的数据单独作为props传给子组件，子组件在触发事件时，把数据和事件对象一起传回父组件：

class Parent extends Component {
  handleClick = (data, e) => {
    console.log('触发事件，数据：', data, '事件对象：', e);
  }

  render() {
    // 这里的this.handleClick是固定引用，不会每次render变化
    return <ChildButton data="myData" onClick={this.handleClick} />;
  }
}

// 子组件
class ChildButton extends PureComponent {
  render() {
    return (
      <button onClick={(e) => this.props.onClick(this.props.data, e)}>
        点击我
      </button>
    );
  }
}

这种方式下，父组件传给子组件的onClick是固定的函数引用，只有当data变化时，子组件才会因为props变化重渲染，避免了无意义的更新。

• 方案二：提前缓存带数据的事件处理函数
  如果必须在父组件里绑定好带数据的函数，可以在组件初始化或者数据更新时，提前缓存好这些函数，避免每次render生成新引用。比如在componentDidMount或componentDidUpdate里处理：

class Parent extends Component {
  constructor(props) {
    super(props);
    this.cachedHandlers = {};
    // 初始化时缓存对应数据的处理函数
    this.cachedHandlers['myData'] = (e) => this.handleClick('myData', e);
  }

  handleClick = (data, e) => {
    console.log('触发事件，数据：', data, '事件对象：', e);
  }

  componentDidUpdate(prevProps) {
    // 如果数据有变化，更新缓存的处理函数
    if (prevProps.targetData !== this.props.targetData) {
      this.cachedHandlers[this.props.targetData] = (e) => this.handleClick(this.props.targetData, e);
    }
  }

  render() {
    return <ChildButton onClick={this.cachedHandlers['myData']} />;
  }
}

这种方式需要注意数据更新时的缓存同步，但能保证传给子组件的onClick引用是稳定的。

总结 #

• 类字段定义的柯里化函数本身不会每次render创建新函数，但调用它生成具体事件处理函数时，每次都会返回新的引用，这会和内联函数一样导致子组件不必要重渲染。
• 要避免这个问题，要么拆分数据与事件处理函数，要么提前缓存好带特定数据的事件处理函数，保持props引用的稳定性。

内容的提问来源于stack exchange，提问作者Selenir