在渲染中调用柯里化函数对性能有负面影响吗？

Question

我读过，这是很好的做法，声明功能组件的方法，而不是在它内联的render，因为每次家长组件呈现它创造了新的功能，并打乱了与孩子的shouldComponentUpdate。

即这个： <button onClick={this.handleClick} /> 比那个好：<button onClick={e => someAction(e)} />

但是柯里化函数呢？以下是否被视为创建新功能？

class Parent extends Component {
  handleClick = data => event => someAction(data);

  render() {
    const data = 123;
    return <button onClick={this.handleClick(data)} />;
  }
}

我知道那里的“性能影响”可能不明显，但我发现在传递组件树的同时部分应用函数参数非常方便，我想知道这是否违反了最佳实践。

Answer 1

是的，由于额外的函数调用，它对性能有负面影响。但是你真的需要担心吗？很可能不是。有一些流行的 React 模式在 中使用闭包render，例如https://reactjs.org/docs/render-props.html先测量以避免在想象中的性能瓶颈上花费精力。