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首先测量以避免在假想的性能瓶颈上消耗能量。

Answer 2

是。每次执行handleClick时，您都会得到一个新函数。换句话说，handleClick的目的是返回一个新函数。如果删除一些隐式语法，您将获得：

handleClick = data => {
  const innerFunction = event => someAction(data);
  return innerFunction;
}

附注：我已经阅读了一些基准测试，通过在渲染中创建函数，这种性能影响可能比大多数人想象的影响要小。

在渲染中调用curried函数会对性能产生负面影响吗？

2 个答案: