Question

两者之间是否存在任何性能差异（或其他差异，一个或一个都优于另一个）

在渲染功能中使用箭头功能：

<SomeElement
    onClick={() => this.updateSalesQuoteProgress(QuotationProgressState.Done)} 
/>

private updateSalesQuoteProgress = (progress: QuotationProgressState): void => {
    this.actionService.updateSalesQuoteProgress(this.props.project, progress);
};

在渲染函数中使用部分应用程序：

<SomeElement
    onClick={this.updateSalesQuoteProgress(QuotationProgressState.Installed)}
/>

private updateSalesQuoteProgress = (progress: QuotationProgressState): (() => void) => {
    return () => {
        this.actionService.updateSalesQuoteProgress(this.props.project, progress);
    };
};

如果有区别，请说明原因

Answer 1

在这两种情况下，当您拥有大型应用程序和大量此类模式时，都会在每个渲染器上创建返回的函数，这会影响性能。

当您将组件嵌套为PureComponent或使用shouldComponentUpdate道具比较来实现shallow时，以及将箭头函数作为道具传递时，{ {1}}无法引起性能问题。

示例演示

PureComponent

class Child extends React.Component {
  shouldComponentUpdate(nextProps) {
    if(this.props.onClick === nextProps.onClick) {
      console.log('same click');
    } else {
      console.log('different click');
    }
    
    if(this.props.onChange === nextProps.onChange) {
      console.log('same change');
    } else {
      console.log('different change');
    }
    return true;
  }
  click = () => {
    this.props.onClick('xyx');
  }
  render() {
    return <button onClick={this.click}>Click</button>
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
     this.state = {
      count: 0
    }
  }
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState(prev => ({count: prev.count+ 1}));
    }, 1000)
  }
  handleClick = (id) => (value) => {
    console.log(id, value);
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  handleChange = (val) => {
    console.log(val)
  }
  render() {
    return (
      <div><Child onClick={this.handleClick(1)} onChange={() => this.handleChange(1)} count={this.state.count}/></div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

为了避免内联箭头功能，您可以参考这篇文章

How to avoid bind or inline arrow functions inside render method

在渲染功能中使用箭头功能和部分应用程序之间的性能差异？

1 个答案: